CSS and Firefox not cooperating

@ekobakerNov 24.2007

I’ve never had this problem in the numerous websites I’ve coded. But for some reason (I’m sure I’m making a mistake somewhere) Firefox is not recognizing the “width” and “height” attributes of certain elements… And Internet Explorer is. This is a huge slap in my face because I hate IE and am programming a site for Firefox and frankly don’t care what it looks like in IE. (It’s my personal site, and if it’s not as pretty or slightly screwed up in IE, all the more reason to get Firefox… But it’s backfiring and working perfectly in IE and looking like crap in Firefox.)

I normally wouldn’t just load the first post with code, but I don’t understand what I’m doing wrong here. So please, let me know! (I would just link you to my site, but I don’t have a host.)

style.css

[code]body { background-color : #090909; background-image : url(../img/background.jpg); background-repeat : no-repeat; margin : 0; padding : 0; }

#hopper { margin : 0; width : 972px; clear: both; }

#mNav { width : 255px; float : left; margin-top : 185px; } a.mlink:link, a.mlink:visited { width: 133px; height: 28px; background-color: transparent; background-image: none; padding-left: 15px; margin-left: 97px; font: bold 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #e6f0f2; text-decoration: none; line-height: 30px; } a.mlink:hover, a.mlink:active { width: 133px; height: 28px; background-color: transparent; background-image: url(../img/menu_bg.jpg); padding-left: 15px; margin-left: 97px; font: bold 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial, Serif; color: #FFF; text-decoration: none; line-height: 30px; }

#main { margin: 0; padding-top: 29px; width: 717px; float: left; background-color: #FFF; font: normal 11px/15px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #222222; }

.copy { position: relative; left: 553px; margin: 0; padding: 7px; width: 150px; background-color: #090909; font: normal 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #FFF; text-align: center; } a.top:link, a.top:visited, a.top:active { font: bold 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #fff; text-decoration: none; } a.top:hover { font: bold 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #FFF; text-decoration: none; border-bottom: 1px #4C7F90 solid; }

h1.title { padding-left: 18px; padding-bottom: 33px; font: bold 11px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #222222; } h1 { padding-left: 22px; padding-bottom: 0; margin-bottom: 0; font: bold 18px ‘Trebuchet MS’, Tahoma, Verdana, Arial; letter-spacing: -1px; line-height: 0; color: #222222; }

h1.under { padding-left: 22px; margin: 0; font: normal 9.5px Tahoma, Verdana, Arial; color: #676767; letter-spacing: 0; }

p { padding-left: 22px; padding-right: 171px; }

.blogHd { bckground-color: #090909; width: 537px; height: 47px; font: bold 18px ‘Trebuchet MS’, Tahoma, Verdana, Arial; color: #FFF; letter-spacing : -1px; line-height : 0; padding-left : 10px; padding-bottom : 0; margin-bottom : 0; }[/code]

index.html

[code]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”content-type” content=”text/html;charset=iso-8859-1″> <title>my site</title> <link rel=”stylesheet” type=”text/css” href=”./css/style.css”> </head>

<body> <div id=”hopper”>

<!– ———————— Menu — –> <div id=”mNav”> <a href=”about.php” class=”mlink” style=”width: 133px; height: 28px;”>ABOUT</a><br /> <a href=”galleries.php” class=”mlink”>GALLERIES</a><br /> <a href=”print.php” class=”mlink”>PRINT/GEAR</a><br /><br /> <a href=”home.php” class=”mlink”>HOME</a><br /> </div> <!– Close Menu div –>

<!– ———————— Main — –> <div id=”main”> <h1 class=”title”>MY Site</h1> <p> <h1>Welcome to the Gallery of Art and Light</h1><br /><h1 class=”under”>please enjoy! — baker</h1> </p>

<p style=”background-color: #090909; width: 537px; height: 47px; display: block;”>Welcome</p> <p> Hello there! </p>

</div> <!– Close Main div –>

</div><!– Close Hopper div –> </body> </html>[/code]

It’s not recognizing the width and height attributes of the ~~[B]~~a.mLink[/B] elements and ~~[B]~~blogHd[/B] class. For the mLink its only going to the end of the word, and not displaying the full background image. and blogHd is going all 717px instead of the 537px I want it to.

Where am I going wrong?

to post a comment

CSS

19 Comments(s) _↴

@CentauriNov 24.2007 — #First, you cannot apply width and/or height to inline elements - only block level elements. Therefore you need to convert the <a> elements to block either by the display property or by floating, whichever is more appropriate.

To what does class .blogHd refer to? - there does not appear to be any reference to this in the html.

@drhowarddrfineNov 24.2007 — #In addition, your doctype (incorrectly) declares html yet you try to use an xhtml namespace and xhtml end tags. The first line puts IE into quirks mode.

@ekobakerauthorNov 25.2007 — #Thanks for the responses! I'll fix that. This was annoying me (obviously I'm not too knowledgeable about CSS and stuff).

Thanks!

@WebJoelNov 26.2007 — #[B]<p>[/B]

<h1>Welcome to the Gallery of Art and Light</h1><br /><h1 class="under">please enjoy! -- baker</h1>

[B]</p>[/B][/QUOTE] The "H" tags 1-6-[I]inclusive[/I], are block-level tags that do not need to be containerized in "<p>". Lose the "[B]<p>[/B]" "[B]</p>[/B]" here.

Also, as a 'block-level element', the h-tag does not require a "<br />" if you close the first and are going to re-open it (or another) :

Example:

(not required) <h1>This is a Header>[COLOR="Red"]</h1>[/COLOR]<br /><h1>and this line is below the top</h1>

The "[COLOR="Red"]</h1>[/COLOR]" closes the block-level element "h1" and forces a virtual line-return anyway, making the "<br />" not needed. They are not going to be 'side-by-side' here, unless you specify a width for each, and then float them both. ?

@ray326Nov 26.2007 — #The "H" tags 1-6-inclusive, are block-level tags that do not need to be containerized in "<p>".[/QUOTE]"Do not need to be" is a little mild. Block level elements "can not (legally) be" would be a little better. ?

@WebJoelNov 26.2007 — #Yes. And:
<!DOCTYPE [B]HTML[/B] PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

....

....[/QUOTE] incomplete !doctype (missing URL), and [B]adjacent dashes[/B] in a comment, etc. And of the shown !doctype, "HTML" should be "lowercase"...

-I don't get strict until after 6-PM at the eariliest... ?

@ekobakerauthorNov 27.2007 — #I appreciate all the help! And to think, I thought I knew X/HTML and a little bit of CSS. ... Just proves to me that I really don't know much. ? But its good. I'll learn.

Thanks! And keep critiquing if you want! While I'm more than likely not going to really be a programmer, I like being able to create and edit my own website. So thanks for all the tips!

@WebJoelNov 29.2007 — #You'll get there. Appreciating the beauty that code can translate into is the best feeling. If you don't love what you're doing then you're in the wrong game. ?

And this:



Is merely a 'warning' (like an [I]error-lite[/I]), -under some circumstances even though it is [I]invisible[/I], it can create a virtual "<br />" in how your page renders. Using the mouse tool in Firefox sometimes, if you click-hold-&-drag to highlight, you might see the

[COLOR="RoyalBlue"][/COLOR], which causes 'height'... I spent a miserable quarter-hour one time, trying to figure out where some extra 'layout-breaking height' was coming from... and it was [I]this[/I]!

@ekobakerauthorNov 29.2007 — #Wow! I never would have guessed that. I'll go ahead and remove it as it's not really necessary. Thanks for the warning!

@ray326Nov 29.2007 — #Use "=====" or "******" or anything but "-----------" as comment eye candy. The only place in a comment where a pair of dashes should appear are the opening and closing tags.

@WebJoelNov 29.2007 — #You can even put your Richard Pryor to it I suppose, and go:



-Just preserve that "[COLOR="Red"][/COLOR]", without any additional " - " (hyphens).

Note the 'whitespaces' in the opening and the closing end of the [COLOR="Red"]tag[/COLOR].

Myself, this:



demonstrates a weak hand. Graffitti, of a sort. I find it difficult to read, -which is exactly the opposite of it's intention (to make it clearer to the next developer what comes next, etc). And, is bloat. Those unnecessary characters in a large site can add-up for a few KB, which could be saved if this convention were not used.

And, like the 'swearing comment' above, to paraphrase, is a sign of a weak mind trying to express itself forcefully..

Enough attention can be called to a "comment" using the barest minimal characters and speaks of the coder's professionalism:



(Opinions expressed here were those of my professor, opinions of which I take favor upon and have adopted as my own ? ).

@thanixNov 30.2007 — #In addition, your doctype (incorrectly) declares html yet you try to use an xhtml namespace and xhtml end tags. The first line puts IE into quirks mode.[/QUOTE]

True, if you use broken "doctype" or incomplete doctypes, IE or any other browser for that matter, will switch to quirks mode.

I'm writing a series of "the making of a webdev" blog posts on http://thanix.info/blog Yesterday's topic was just that, "doctypes". Please take a look.

@ShochuManDec 05.2007 — #I'm having the same problem. I've validated my page and made the appropriate changes but in Firefox, my layers are all over the place. Should I try a different doctype or what?

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 <style type="text/css">
 <!--
 #servingkeybody {
 font-family: Verdana, Georgia, Geneva, Arial, "Times New Roman";
 font-size: 12px;
 color: #000000;
 background-color: #FFFFFF;
 position: absolute;
 height: 250px;
 width: 352px;
 left: 0px;
 top: 0px;
 }
 .empty {
 position: absolute;
 left: 270px;
 top: 30px;
 visibility: visible;
 }
 .full {
 position: absolute;
 left: 48px;
 top: 30px;
 visibility: visible;
 }
 .half {
 position: absolute;
 left: 159px;
 top: 30px;
 visibility: visible;
 }
 .optimal {
 font-family: Verdana, Georgia, Geneva, Arial, "Times New Roman";
 font-size: 14px;
 font-weight: bold;
 color: #000000;
 position: absolute;
 left: 37px;
 top: 150px;
 }
 .favorable {
 font-family: Verdana, Georgia, Geneva, Arial, "Times New Roman";
 font-size: 14px;
 font-weight: bold;
 color: #000000;
 position: absolute;
 left: 139px;
 top: 150px;
 }
 .satisfactory {
 font-family: Verdana, Georgia, Geneva, Arial, "Times New Roman";
 font-size: 14px;
 font-weight: bold;
 color: #000000;
 position: absolute;
 left: 242px;
 top: 150px;
 }
 .HOWTO {
 font-family: Verdana, Georgia, Geneva, Arial, "Times New Roman";
 font-size: 16px;
 font-weight: bold;
 color: #000000;
 position: absolute;
 left: 29px;
 top: 1px;
 }
 -->
 </style>
 </head>
 
 <body>
 <div id="servingkeybody">
 <div class="HOWTO"> How to read  serving information:    </div>
 <div class="satisfactory">
 <p>Satisfactory</p>
 </div>
 <div class="favorable"> Favorable</div>
 <div class="optimal"> Optimal</div>
 <div class="half">
 <p><img src="img/Label/halfbottle.jpg" alt="Half bottle" width="34" height="115" /></p>
 </div>
 </div>
 <div class="full"> <img src="img/Label/fullbottle.jpg" alt="Full bottle" width="34" height="115" /></div>
 <div class="empty"> <img src="img/Label/emptybottle.jpg" width="34" height="115" alt="Empty bottle" /></div>
 </body>
 </html>[/code]

@WebJoelDec 05.2007 — #If the post didn't help you directly with your problem, you should start [I]another thread[/I]. 'hijacking' a thread makes your problem not be indexed properly. And, if the Original Postee ("OP") adds a "resolved" icon to his thread, the thread is deemed [I]solved[/I] and often people whom could help you, are not aware of your request. ? *I* seldom examine posts with the "resolved" checkmark icon, figuring that I have nothing to add if the problem is solved. ?

But yes, your absolute positioning (a.k.a. dreameaver's "layers") are most likely the fault. Unless their is a unifying all-encompassing 'position:relative;" [I]container[/I], these "absolutes" are based upon position 0,0 (left-top corner) of the visitor's browser, no matter what resolution they have. This means that if their resolution size is anything [I]other[/I] than exactly the same as yours, -they get 'skewed, overlapping elements'. That is absolute positoning at work and most likely, the single biggest qualm & peave with DW-based design. ?

@drhowarddrfineDec 05.2007 — #Changing doctypes is never an option. It is the very first thing to go on a page before anything else. It's the set of rules you follow when you create the page so changing the rules at the end would screw things up.

Of course, FF moved things around. You changed the rules. Never use IE as a reference.

@WebJoelDec 05.2007 — #I copied and examined your code: -it looks vaugely as if you want to associate [I]text[/I] with an [I]image[/I]. Another name for this, is a 'gallery' or 'photobook'. This can be acheived by using an UL, for ease-of-markup:

[code=html]<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <title> New Document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta name="Generator" content="" />
 <meta name="Author" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <style type="text/css">
 *   {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
 body {min-height:100%; height:100%;
 font:x-small Arial, Verdana, sans-serif;
 voice-family: ""}"";voice-family:inherit;
 font-size:small;/*for IE 5.5 */
 } html>body {font-size:small;}
 /*font-size: small; voice-family: ""}"";
 voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */
 
 p {font-size: 90%; line-height:1.2em; margin-top:6px;}
 h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
 font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
 h1{font-size: 1.93em; margin-top:12px;}
 h2{font-size: 1.72em; margin-top:12px;}
 h3{font-size: 1.52em; margin-top:12px;}
 h4{font-size: 1.42em; margin-top:12px;}
 h5{font-size: 1.32em; margin-top:12px;}
 h6{font-size: 1.21em; margin-top:12px;}
 
 ul#photobook {position:relative; width:650px; height:410px; margin:70px auto; list-style-type:none;
 font-family:arial, verdana, serif; border:5px double silver;}
 ul#photobook h1 {position:absolute; left:105px; top:-55px; width:450px; margin:20px auto; text-align:center; border:3px double silver; border-bottom: 0 none;}
 ul#photobook li {float:left; margin:7px;}
 
 ul#photobook li img {border:1px solid blue; height:80px; width:144px; display:block;}
 
 ul#photobook li p {text-align:center; margin:5px 0; width:140px; height:30px;}
 .clear	 {clear:all;}
 </style>
 </head>
 
 <body>
 
 <ul id="photobook">
 <li><img src="#" alt="this is a picture"/><p>L. Ips. Dolar</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your visible descriptive text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar </p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your descriptive text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your visible descriptive text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your descriptive text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar </p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem<br />Ipsum Dolar</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your descriptive text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum text</p></li>
 <li><img src="#" alt="this is a picture" /><p>Lorem Ipsum Dolar your descriptive text</p></li>
 
 <li><h1>An all-CSS image-ready photobook</h1></li>
 </ul>
 
 </body>
 </html>[/code]

@ShochuManDec 06.2007 — #I'm not really trying to create anything extraordinary. I merely want a line of 3 images with the corresponding labels below.

Check it out: http://www.shochucircle.com/servingkey.html

I always use FF as my main reference and only look at IE to make sure the page appears the nearly the same. It's very strange because I've never had this problem until recently. :eek:

Seriously...wtf?

@CentauriDec 06.2007 — #The unnecessary use of element containing divs, the unnecessary absolute positioning, and the non-association of the text with the images are all problems here. Redoing it using WebJoel's example above will cure all of this.

@ShochuManDec 06.2007 — #Great, I'll give it a shot.

Also in #CSS _↴

text goes and goes and goes....Positioning my page WordPress CSS adjustments on Faculty theme, help needed!

Success!

Help @ekobaker spread the word by sharing this article on Twitter...

Tweet This

CSS and Firefox not cooperating

19 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS and Firefox not cooperating

19 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #CSS _↴