One code being applied to every html...

User 2432550 Photo


Registered User
105 posts

Can someone look at this site and tell me why the Google font html coding I put at the top of the page is now applying that font and size to every html box on the page and making it go crazy?

The html box on the left should be only be to justify the text. And I don't know why the links at the bottom are changing fonts too.

The site is - http://www.kimberlywalton.net/Moxie.html

This is the html head:
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link media="screen" rel="stylesheet" href="colorbox/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".example1").colorbox();
});
</script>

Please help!
User 187934 Photo


Senior Advisor
20,271 posts

You probably need to add a class to your code so it only affects the proper html boxes.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2432550 Photo


Registered User
105 posts

Can you tell me how to do that? (Sorry if it's basic, but I'm a newbie, really appreciate your help!)
User 2432550 Photo


Registered User
105 posts

My code looks like this right now (for the Google font text)...

<html> <head> <a href="http://www.kimberlywalton.net/"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway"> <style> body { font-family: 'Raleway', serif; font-size: 52px; } </style> </head> <body> <div>KIMBERLY WALTON</div> </body> </html>

How do I put a class in this code to make sure it does not affect any other html box?
User 187934 Photo


Senior Advisor
20,271 posts

Let me look and see how the font is being applied.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,271 posts

Lets fix some other issues while were at it. You have some extra head and html tags in your site from pasting code that need to be removed. In FX right click on your page then view source. Now look at thing typically that are highlighted red may have a problem.
The first one I would worry about is at line 195.
That's where the extra body, head and html tags are. Find the html box that contains those and remove them from your code.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2432550 Photo


Registered User
105 posts

Thanks for your help. I did that so now we have this code-

<a href="http://www.kimberlywalton.net/"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway"> <style> { font-family: 'Raleway', serif; font-size: 52px; } </style> <div>KIMBERLY WALTON</div>

Line 195 is pretty much the source of the problem because I am just trying to get a Google font code in there. The other html boxes work fine now, but the Google font html code does not.
User 187934 Photo


Senior Advisor
20,271 posts

This is still a problem. Delete it.:)
<html> <head> <a href="http://www.kimberlywalton.net/"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway"> <style> body { font-family: 'Raleway', serif; font-size: 52px; } </style> </head> <body> <div>KIMBERLY WALTON</div> </body> </html>

Paste this to the header HTML of the html box
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway">
<style type="text/css">
<!--
.customfont { font-family: 'Raleway', serif; font-size: 52px; }
-->
</style>

Put this in the body html of the same html box.
<a class="custom_font" href="http://www.kimberlywalton.net">KIMBERLY WALTON</a>




Now lets fix those lightbox image links. All of them are linked with this at the end.
<a/>
Should be this.
</a>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2432550 Photo


Registered User
105 posts

Ok thanks, that seems to have made the font go back to normal, but when I put my mouse over it, it treats it like a link and highlights it (just like the html box on top should). How do I further distinguish the 2 html boxes?
User 187934 Photo


Senior Advisor
20,271 posts

Can you publish your site so i can see?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.