Jump to content
confused and dazed

<iframe> is making me lose font styles

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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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'>

Share this post


Link to post
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); }

Share this post


Link to post
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?

Share this post


Link to post
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); }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...