SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fairly new to CSS...need guidance

    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

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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:
    Code:
    * {
    	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;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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!
    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):
    Code:
    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.

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by strummin4christ
    Although thats not much of a change, it does eliminate quite a bit of redundant declarations in the CSS.



  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A large part of your problem is likely caused by the dreaded IE Doubled Float-Margin Bug in all its sucktacular glory.

  10. #10
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Older browsers: http://browsers.evolt.org/

  11. #11
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    #header2 {
     width: 100%;
     height: 132px;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     background: url('../img/pageHeader.gif') no-repeat 9px 0;
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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).

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    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.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    #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

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    	<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>
    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }

  21. #21
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    The shark with the sunglasses is too jewish.
    Make his nose smaller.
    -Anonymous/clientcopia.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •