If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Jan 2006
    Member #
    I originally designed the following site using CSS and HTML with all absolute positioning:

    I thought it was a bad site for a newbie until I got some complaints from some of the people viewing the site. When I opened it on my browser at home, which is much smaller than the browser I designed the site on I found that it looked a lot worse! Even though I designed the site to be no more than 800 pixels wide, the page seemed huge and I had to scroll to see everything.

    So I resolved to revamp the site to be flexible or liquid, and to get rid of the absolute positioning. I thought that this was a noble goal until I realized each browser has different bugs or shortcomings when it comes to CSS! A liquid design that looks correct in Internet Explorer doesn't look correct in Firefox, and one that displays correctly in Firefox doesn't look right in Internet Explorer. I didn't even try any other browsers!

    This problem leads me to ask a simple question. Can I display a webpage using a different stylesheet based on the browser that is viewing it?

    If not, can I set up sections in the same Stylesheet that are only applied with specific browsers? (In other words, 2 stylesheets for IE and Firefox in the same parent stylesheet, but only use on or the other.)

    As much as I like CSS, it seems like liquid design with the standard requires an ugly style sheet with all types of hacks for different browsers. Maybe I just need to fall back on the old <table>, <center>, and <color> tags! :cry:
    Scott Huey


  3. #2
    Junior Member
    Join Date
    Jan 2006
    Member #
    I think I accidentally posted this message twice. I apologize about that. I will try to avod this mistake in the future. Can a moderator of the forum delete the first message that I posted?

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Cottage Grove, Minnesota
    Member #
    760 times
    Scott ...

    It looks fine to me in both IE and Firefox.

    In your CSS style sheet file (Main.css), you're specifying the width in some
    places, like 800 and 850. So, it keeps the width where you specified.

    In the beginning of your file "Main.css" put this line to define your body:
    body { background: #fff; }

    Then, use width: 100%; where you are specifying 800, 850 etc.

    I hope I'm getting what you mean ...

  5. #4
    Junior Member
    Join Date
    Jan 2006
    Member #
    Thanks for the response mlseim.

    I gues my question was about the real preacticality of using CSS for liquid site designs. It seems to me the only "browser independent" site design with CSS that I have found is one that uses a large amount of absolute positioning.

    Here are two other sites that appear to use a similar approach:

    My other question was if it is possible to apply different style sheets to the same web page depending on the browser that is viewing it.



  6. #5
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Member #
    you can use conditional comments for IE ,
    also if you use hacks be careful which ones you use...
    try to stay away from hacks altogether if you can..

    check out this site for conditional comments and a safe list of hacks that are ok..

    also i came across this really cool example of a liquid layout..

  7. #6
    Senior Member
    Join Date
    Aug 2006
    Member #
    Using absolute positioned elements is not the way to acheive a liquid site design. The trick is using relative positioning and the em measurement and percentages instead of pixels. The obvious answer...

    The problem you are facing is a problem that everyone here is very familar with... In my experience of designing sites that work across multiple browsers, you really need to learn how to design for 4 different ones.

    IE 6 - Being that it is the most common
    IE 7 - up and coming (obviously because of this you'll need 2 computers)
    Firefox - being that most mac users are using this instead of Safari
    Opera - Why being that it has a low usage ratio? It conforms to web standards and will reinforce your knowledge of how the box model works and how browsers in general work.

    95% of the time you will be able to design a site using CSS techniques in which all browsers will display the same. The trick though is finding out which properties are quirks to one browser and not another. Its weird because some properties will cause absolutely NO change to one browser while when viewed in another will radically screw everything up.

    I recently did a site in which everything appeared fine in all the above mentioned browsers except IE6. The three floats inside my main content div didn't show at all. The problem was fixed by adding a height:100% property to the main content div. Why did this solve the problem when everything was using relative positioning? No clue. But it worked!
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 07:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: