Jump to content

<iframe> is making me lose font styles


confused and dazed

Recommended Posts

I truly appreciate the responses on this one. As far as the font squirly issue I would not be able to give exact code on this one. I will have to see how hosting could help me get out of it or really take a look at how the order of my code may be effecting it. I have used iframe before and I have not had these issues. I will take this one on my own.

 

I would still like to know suggestions on how to eliminate using so many classes (as well as using position:absolute) to give very specific <div> locations on a page. Right now I have not been able to figure out how to postion images and <div> exactly where I want them to go without using classes and position:absolute.

Link to comment
Share on other sites

The only time you normally would need to use position-absolute is when you need to position an item on top of another item that cannot be a background image. Otherwise margin, padding, and alignment provide the positioning.

 

All the nav buttons are the same size so you don't even need a class. You can simply say:

.nav_bannerx button{width: 120px;height: 36px;margin: 0 0 2px 0px;/* include other defaults such as colors and font settings */}

Then you can assign one unique class to each button if you really want each button to be unique. You shouldn't need three or four classes for each button. And these classes only list what is DIFFERENT from the default settings.

 

Also you put each button in its own div and style that div with a unique class. Why? Does this really accomplish something that you need and want?

Edited by davej
Link to comment
Share on other sites

OK so I did some "downsizing" on my code and here is what I have for the html and css

<div class="nav_bannerx"><button type="button" class="a1" onclick="changesel1()"><strong>1</strong></button><button type="button" class="a2" onclick="changesel2()"><strong>2</strong></button><button type="button" class="a2" onclick="changesel3()"><strong>3</strong></button><button type="button" class="a2" onclick="changesel4()"><strong>4</strong></button><button type="button" class="a2" onclick="changesel5()"><strong>5</strong></button><button type="button" class="a2" onclick="changesel6()"><strong>6</strong></button><button type="button" class="a3" onclick="changesel7()"><strong>7</strong></button></div>.nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0px solid Black;}.a1{width:120px; height:36px; background: url(menu1.jpg); margin-left:0px; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a1:hover{background: url(hmenu1_1.jpg); color:#000000; }.a2{width:120px; height:36px; background: url(menu2.jpg); ; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a2:hover{background: url(hmenu2.jpg); color:#000000; }.a3{width:120px; height:36px; background: url(menu3.jpg); ; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a3:hover{background: url(hmenu3.jpg); color:#000000; }

Classes a1,a2,a3 are needed because there are three different images I am using for the buttons - but i eliminated the rest.

Its looks great and there are no so many classes. On a side note the squirly is still there... Still looking into it.

Edited by confused and dazed
Link to comment
Share on other sites

I have it!!!!!! The root cause to the squirly font issue is the google font type Marcellus SC. For whatever reason this particular font is not robust coming from Google. Any thoughts on why? I called it up right after declaring a doc type.

 

 

 

<!DOCTYPE html><html><head>

<link href='http://fonts.googleapis.com/css?family=Vidaloka|Permanent+Marker|Marcellus+SC' rel='stylesheet' type='text/css'>

Link to comment
Share on other sites

with

.nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0px solid black; color:#fff; font-size:9pt; font-family:arial;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg); color:#000; }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); color:#000; }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); color:#000; }

or you could even

.nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0 solid black; color:#fff; font-size:9pt; font-family:arial;}.a1:hover, .a2:hover, .a3:hover {color:#000;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg);  }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); }
Link to comment
Share on other sites

Google fonts are free. Perhaps some of them have bugs. You can probably give them feedback.

 

Rather than using...

<strong>1</strong>

...inside each button, why not just add font-weight:bold to a default button style?

Link to comment
Share on other sites

Google fonts are free. Perhaps some of them have bugs. You can probably give them feedback.

 

Rather than using...

<strong>1</strong>

...inside each button, why not just add font-weight:bold to a default button style?

 

Yes, i was concentrating on css didn't even look at html

.nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0 solid black; color:#fff; font-size:9pt; font-family:Arial; font-weight: bold;}.nav_bannerx button:hover {color:#000;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg); }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...