CSS and Firefox not cooperating [Archive]

Click to See Complete Forum and Search --> : CSS and Firefox not cooperating

ekobaker

11-24-2007, 04:59 AM

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
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;
}

index.html
<!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">


<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> 


<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 class="copy">
©2007 ryan baker   <a href="#top" class="top">TOP</a>
</div>

</div> 

</div>
</body>
</html>

It's not recognizing the width and height attributes of the a.mLink elements and blogHd 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?

Centauri

11-24-2007, 06:25 AM

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.

drhowarddrfine

11-24-2007, 10:31 AM

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.

ekobaker

11-25-2007, 04:59 PM

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

Thanks!

WebJoel

11-26-2007, 12:05 PM

<p>
<h1>Welcome to the Gallery of Art and Light</h1><br /><h1 class="under">please enjoy! -- baker</h1>
</p> The "H" tags 1-6-inclusive, are block-level tags that do not need to be containerized in "<p>". Lose the "<p>" "</p>" 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></h1><br /><h1>and this line is below the top</h1>

The "</h1>" 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. :)

ray326

11-26-2007, 12:54 PM

The "H" tags 1-6-inclusive, are block-level tags that do not need to be containerized in "<p>"."Do not need to be" is a little mild. Block level elements "can not (legally) be" would be a little better. :)

WebJoel

11-26-2007, 01:23 PM

Yes. And:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....
.... incomplete !doctype (missing URL), and adjacent dashes 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... :D

ekobaker

11-27-2007, 12:57 AM

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!

WebJoel

11-28-2007, 06:53 PM

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 error-lite), -under some circumstances even though it is invisible, 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
, 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 this!

ekobaker

11-28-2007, 10:56 PM

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

ray326

11-28-2007, 11:55 PM

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.

WebJoel

11-29-2007, 05:56 PM

You can even put your Richard Pryor to it I suppose, and go:



-Just preserve that "", without any additional " - " (hyphens).

Note the 'whitespaces' in the opening and the closing end of the tag.

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 :D ).

thanix

11-29-2007, 11:07 PM

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.

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.

ShochuMan

12-05-2007, 03:02 PM

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?<!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">

</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>

WebJoel

12-05-2007, 03:21 PM

If the post didn't help you directly with your problem, you should start another thread. '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 solved 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. :cool:

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;" container, 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 other 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. :(

drhowarddrfine

12-05-2007, 04:28 PM

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.

WebJoel

12-05-2007, 05:43 PM

I copied and examined your code: -it looks vaugely as if you want to associate text with an image. Another name for this, is a 'gallery' or 'photobook'. This can be acheived by using an UL, for ease-of-markup:
<!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>

ShochuMan

12-05-2007, 07:57 PM

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?

Centauri

12-05-2007, 10:12 PM

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.

ShochuMan

12-05-2007, 10:42 PM

Great, I'll give it a shot.