Forums

badinar

some help plzzz... i dont think i can start off css with any simpler example than listed below.. but it works differently in ie and css. i would like it to be like how it comes out in firefox.. can someone tell me how??

Thanks!!!



<html>
<head>
<style type=\"text/css\">
.outer {width:600px;background-color:Blue; }

.left {float:left;background-color:green;}

.right {float:left;background-color:yellow;}
</style>
</head>
<body>
    <div class=\"outer\">
        <div class=\"left\">
            zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzz
        </div>
        <div class=\"right\">
            zzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
        </div>
    </div>
</body>
</html>

mikes

At a glance I don't see anything wrong with that. Although I just woke up so I may have missed something :)

First thing I'd do is stick a doctype on there. That may be affecting how browsers are interpreting it.

If that doesn't fix it, post a link so people can see how it's not working.

If you're just getting started with css you may not be familiar with resets. I went a long time before I heard of them but it will help you out down the road reducing the number of issues with pages looking differently in different browsers. Do a search here on resets. I'm sure I saw an article on them.

hth

badinar

Thanks for the reply mikes. Here is the HTMl with doctype included. this is just a quick mockup of the problem i have elsewhere... and it is in the development and is not hosted anywhere...

thanks for the info about resets... i'll look around to find more info about it.

i have uploaded the images of how the display looks..
http://image69.webshots.com/669/2/62/19/2058262190048685497cczcvE_fs.jpg

http://image71.webshots.com/71/4/60/33/2617460330048685497CLayRd_fs.jpg


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" >
<head>
    <title>Untitled Page</title>
    <style type=\"text/css\">
    .outer {width:600px;background-color:Blue; }

    .left {float:left;background-color:green;}

    .right {float:left;background-color:yellow;}
    </style>
</head>
<body>
    <div class=\"outer\">
        <div class=\"left\">
            zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzz
        </div>
        <div class=\"right\">
            zzzzzzzzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
        </div>
    </div>
</body>
</html>

chriscoyier

I didn't see any images of the comparison, but right away I can see one issue. When you FLOAT something, you really need to apply a WIDTH. Different browsers handle it differently when you don't. The one exception is when it's an image that you are floating, since browsers don't misinterpret the width of images.

treehouse : what would you like to learn today?

Forums

cannot get any simpler.. but works differently in ie and fir