Fairly new to CSS...need guidance

[strummin4christ]

Hi. I have been working on a site for my own pleasure and I have been developing in Firefox 1.5 throughout. Once completed in Firefox (I know, I should've checked throughout the development process), I checked my work in IE and it all went to crap. If anyone has the time and desire to look at the site in both Firefox and IE and give any CSS pointers or let me know of any mistakes I've made, it would be greatly appreciated. I am mostly concerned with getting it working in IE as well. Like I said, I am pretty new to CSS, so any and all guidance would be appreciated. The link to the site is here: NW Florida Waterfowl Forum and the css can be found here: CSS . This is not any kind of school project...it is just the only web space I have available at the moment. Thanks in advance!!

Eric

[drhowarddrfine]

First thing I'll say is congratulations because you did the right thing by making sure it works in FF and validating. So you did it right. It should work in all modern browsers (works good in Opera/Netscape. Haven't tried Konqueror/Safari, yet). Now we have to move on to the old, buggy browser and see what we can do with it. Yuck! But it must be done.

[Egor]

The code looks pretty ok to me. You could get rid of those <span>'s used for image replacement and give the container element text-indent: -5000px; to remove the text instead. Less mark-up.

I also noticed a lot of the margins reset to 0 in the CSS. You could set them to 0 for all elements (along with paddings) at the top of your stylesheet, then only apply them as necessary:

* {
	margin: 0;
	padding: 0;
}

Before...
#header h1 {
	width: 100%;
	height: 161px;
	margin: 0px 0px 0px 9px;
	padding: 0px;
	background-image: url('../img/header.gif');
	background-repeat: no-repeat;
}

After...
#header h1 {
	height: 161px;
	margin-left: 9px;
	background-image: url('../img/header.gif');
	background-repeat: no-repeat;
}

[strummin4christ]

Thank you both for responding. At least I know that I'm headed in the right direction! The more and more I get into web design, the more I begin to hate IE. Anyway, thanks again!

[dc dalton]

Your definately on the right path, excellent work for a "newbie"

I have one question (to make you think ) .. look at your header div. IS there a reason for it? What's inside it? I simple h1 tag right? OK so now think about this ... what if you dumped the div and made ONLY the h1 tag do everything you have happening now..

I won't go any further than that cause I REALLY want you to look and think about it!

Cheers!

[strummin4christ]

Your definately on the right path, excellent work for a "newbie"

I have one question (to make you think ) .. look at your header div. IS there a reason for it? What's inside it? I simple h1 tag right? OK so now think about this ... what if you dumped the div and made ONLY the h1 tag do everything you have happening now..

I won't go any further than that cause I REALLY want you to look and think about it!

Cheers!

As best I can tell, all that would change (in the CSS) is that the h1 style would become (assuming I've globally set the margins and padding to 0px as suggested above):

h1 {
     width: 740px;
     height: 161px;
     margin-left: 9px;
     background-image: url('../img/header.gif');
     background-repeat: no-repeat;
}
h1 span {
     display: none;
}

Although thats not much of a change, it does eliminate quite a bit of redundant declarations in the CSS.

[dc dalton]

Although thats not much of a change, it does eliminate quite a bit of redundant declarations in the CSS.

[strummin4christ]

You didn't happen to see any reason why it doesn't work in IE, did you? It is baffling the heck out of me! I've tried adjusting margins, using negative margins (although that seems almost hack-ish to me), and anything else I could think of, but to no avail.

Also, I have been meaning to ask about browser versions. How do you specifically test for the different browser versions? Is it possible to download older versions of browsers? I've looked on Mozilla's site, but the only download I see is FF 1.5.

[KelliShaver]

A large part of your problem is likely caused by the dreaded IE Doubled Float-Margin Bug in all its sucktacular glory.

[Egor]

Older browsers: http://browsers.evolt.org/

[Buddy Bradley]

You could get rid of those <span>'s used for image replacement and give the container element text-indent: -5000px; to remove the text instead. Less mark-up.

Using a redundant <span> to do image replacement (Gilder/Levin method) is more accessible than the text-indent (Phark) method, as it works if images are off but CSS is on.

[strummin4christ]

Looking at the site in IE using a modified stylesheet for IE, is it apparent why the "page" div (w/ background-color: black) is showing the background color to the right of the actual page? The page is set to be 760px wide to show the drop shadow effect and the divs inside the "page" div are set to 740px wide. With this in mind, it doesn't seem that the black should be showing outside of the "page" div, since the background-image for "page" is a static 760px wide.

Looking at the original page with the original stylesheet, Why does the links section get pushed so far down the page? Does this baffle anyone other than me? I am officially joining the anti-IE community!

[Paul O'B]

Hi,

Your background is out in IE because your #header2 element is 9px too wide. It's too easy to blame ie for your own mistakes

You have made #header2 100% wide and given it a left margin of 9px. This makes its total width 100% plus 9px which is always going to be too big for its parent container. Good browsers will ignore any overflow and just let it spill out but won't break the design. IE on the other hand stretches the parent to accomodate and thus breaking the layout. Ie is in the wrong but it is your mistake that caused it in the first place

Just remove the margin and set the background image position to compensate.

#header2 {
 width: 100%;
 height: 132px;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 background: url('../img/pageHeader.gif') no-repeat 9px 0;
}

[strummin4christ]

ah, well don't I just look like an idiot!! Thank you very much for pointing out my mistakes! It is much appreciated!

Is there any problem with using IEs conditionial comment to switch stylesheets for IE. Furthermore, is it generally considered bad practice to switch stylesheets like I am attempting to do?

[Paul O'B]

Hi,

ah, well don't I just look like an idiot!!

No... far from it - it's an easy mistake to make

Its fine to use conditional comments for ie and is the only way that you will be able to also target ie7 successfully (at present).

However I would only include the specific code that ie needs and not the whole file as that's just a waste and means you have to keep 2 whole stylesheets being updated. Just use the ie only stylesheet for the different styles that ie needs and not the whole lot.

[Paul O'B]

Looking at the original page with the original stylesheet, Why does the links section get pushed so far down the page? Does this baffle anyone other than me? I am officially joining the anti-IE community!

I'm not sure I'm looking at the right thing but the links are in exactly the same place in ie and firefox (approx 350px from the top of the viewport). You can move the links up by either dragging the ul upwards or by making your #listheader position absolute (give linkList a position:relative for a local stacking context).

[strummin4christ]

I'm not sure I'm looking at the right thing but the links are in exactly the same place in ie and firefox (approx 350px from the top of the viewport). You can move the links up by either dragging the ul upwards or by making your #listheader position absolute (give linkList a position:relative for a local stacking context).

That's my mistake. I posted the wrong link. That was the link to the page that used the IE stylesheet.
This is the original page with the original stylesheet. Sorry for the mix-up. This page displays exactly as I want it to in FF, but IE (or my incorrect CSS ) pushes the links list down past the content on the right.

[Paul O'B]

Hi,

577 + 15 + 160 + 9 = 761px

The parent is only 760px wide so it won't fit anyway

Then theres the double margin bug on the side of a float and the three pixel jog (both explained in the faq on floats).

This is the fix:

#content {
 width: 577px;
 height: 100%;
 margin: -25px 14px 5px -3px;
 float: right;
 display:inline;
}
#linkList {
 width: 160px;
 height: 100%;
 margin: -32px 0 0 9px;
 padding: 0px;
 background-image: url('http://students.uwf.edu/emc11/duck_site//img/links_bg.gif');
 background-repeat: repeat-y;
 /*float: left;*/
}

That should line up now

[strummin4christ]

Thank you very much for your help! After making the changes suggested by you and the others who posted here, I have been able to get the site to its current stage. As far as IE is concerned, the site is complete. I am still having issues with FF and the floated #content though. The #page div is not wanting to expand to accomodate the changing height of the #content div. I have tried using clear: both, but to no success. The main CSS file can be found here, and the IE-specific CSS can be found here.

[Paul O'B]

HI,

You just need to clear the floats properly before the closing div of the parent container. A container that holds only floats in fact holds nothing and the parent remains at zero height. You need to force the parent to wrap by clearing the floats using one of the many clearing methods available.

here's one way:

	<p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://students.uwf.edu/emc11/duck_s.../valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="<A href="http://jigsaw.w3.org/css-validator/"><img">http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://students.uwf.edu/emc11/duck_s...or/images/vcss" alt="Valid CSS!" /></a> </p>
</div>
<div class="clearer"></div>
</div>
<!-- The div containing the copyright and site designer information -->
<div id="pageFooter">
<h5> Copyright &copy; 2005, Northwest Florida Waterfowl Forum&nbsp;&nbsp;|&nbsp;&nbsp;Site designed and maintained by Eric Cobb </h5>
</div>
<div id="tailDiv">
<!-- This is the div that contains the tail of the duck in the header. This will be displayed if the user's resolution is greater than 800x600 -->
</div>
</body>
</html>

.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

[strummin4christ]

Thank you so much for all of your help! I had tried using a <br clear="all">, but apparently that isn't supported in XHTML. I have actually used a clearing class in other situations, but I used the "clear: both" statement. I guess it makes sense why that wouldn't work, since that only clears each side of any given float? haha, maybe it doesn't make sense to me but thats my best guess. Anyway, Thanks again!! If anyone cares to see the final layout, take a look here. The only link that works at the present is the advertising link.