3 replies [Last post]
cmose
Offline
Regular
Last seen: 18 years 1 day ago
Joined: 2003-12-05
Posts: 14
Points: 0

I know there a few issues with this, one specifically that is the most visually obvious to me is that the height of the leftcont div and news divs is significantly shorter in ie then in moz/fb, this is b/c for the hight to look good in ie, it would overflow its container in moz/fb. I realize that there is probably a browser hack I could employ to tidy this up but I am entirely unfamiliar with those so I would very much appreciate any suggestions. Also if those with other browses could check this out and let me know what it works in/doesn't work in. Any suggestions to make it better or fix things that break in various browsers would also be greatlyi appreciated. Thanks much for any and all input and thanks to those here who helped me work out some of the kinks along the way (any design suggestions are also welcome).

http://69.36.167.110/test/testing.html

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css"/>

<link rel="stylesheet" href="style.css" />

<script type="text/javascript" src="stm31.js"></script>
</head>
<body>
<div class="makecenter">

<div id="header">Banner</div>
<div id="nav">
<div id="menu">
<script type="text/javascript" src="menutest.js"></script>
</div><!--end menu-->
</div><!--end nav-->
<div id="content">
<div id="leftcont">
<p>Commodo tincidunt eum nostrud at velit eum dolore consequat minim et consequat lorem vero et ad zzril illum in. Delenit accumsan tation in laoreet, euismod. Hendrerit odio eum amet wisi odio nostrud dolore feugiat adipiscing zzril minim, nisl quis erat dolore blandit, blandit sit. 
</p>
<p>Hendrerit minim praesent suscipit ex vero nonummy duis. Enim ea ullamcorper at feugiat delenit. Tation accumsan in et nostrud vulputate ea erat in dolore iusto illum nonummy, at. Vel, ullamcorper suscipit dolor, velit odio, suscipit consequat, feugait wisi molestie ea blandit nulla molestie accumsan vero ut. Ex vulputate diam blandit aliquip eu lorem veniam dolore duis delenit, consequat dolore minim wisi, duis duis, consequat tincidunt. At duis ex amet odio dolore. Veniam nisl eum ex, exerci veniam feugait nulla. Vel, magna ut nulla. Feugiat in praesent erat minim ea in consequat suscipit exerci ipsum, duis dolore nulla commodo. 
</p>
<p>Lorem diam hendrerit, dolore sed praesent aliquip 

luptatum vulputate augue enim ad, et aliquam luptatum eu minim. Consequat facilisis molestie autem in in ad facilisi quis aliquip eu te velit enim sed. Elit vel nibh sit vel te nulla ex lobortis nulla dignissim qui tation eros dolore, duis qui. Molestie feugiat velit consequat iriure sed wisi nulla dignissim dolore illum duis vulputate et velit. Adipiscing consequat consequat ipsum molestie dolore autem ut suscipit facilisi exerci odio praesent vero dolore eros odio. Aliquip et ut. Augue nostrud consequat odio eum suscipit autem eros enim dolore exerci, tincidunt erat ex, magna in. Feugait duis amet feugait duis accumsan delenit delenit ut dignissim. Qui, in molestie nibh, vulputate feugait nonummy zzril ea delenit nostrud dolore minim veniam odio volutpat delenit nulla. Aliquip iriure vero ullamcorper eum minim velit veniam, dolor, exerci ea. Te nulla consequat, minim nonummy nulla dolore tincidunt consectetuer dolore nulla lorem commodo, ut, at blandit praesent suscipit. Eu feugiat eum praesent elit in, ea elit suscipit nisl blandit.</p> 
</div>
<div id="news">
<div style="text-align:center">NEWS</div>
<div id="newscont">12-09-03: Some news goes here about product stuff to see if this will wrap or break things</div>
</div><!--end news-->
</div><!--end content-->

<div id="footer">
<div id="footerbord">Footer</div>
</div><!--end footer-->
</div><!--end makecenter-->
</body>
</html>

css

body
{
background-color: #C1CDC1;
color: gray;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
font-family: verdana, tahoma, sans-serif;
text-align: center;
font-size: 12px;
line-height: 18px;
}

div.makecenter
{
position: relative;
width: 800px;
height: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
}

#header
{
background-image:url("banner3.jpg");
width: 800px;
height:200px;
text-align: center;
}

#nav
{
width: 800px;
background-color: #FFFFF7;
color: #FFFFF7;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

#menu
{
background-color: #FFFFF7;
width: 800px; 
text-align: left;
float: left;
}

#content
{
background-color: white;
width: 800px;
height: 500px;
* height: 525px; /*for ie only*/
color: black;
}

#leftcont
{
width: 588px;
height: 461px;
* height: 525px; /*for ie only*/
float: left;
overflow: auto;
background-color: white;
margin-left: 5px; 
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
* margin-bottom: 3px; /*for ie only*/
}

#news
{
height: 461px;
* height: 525px; /*for ie only*/
width:182px;
float:right;
background-color:#F5F5F5;
/*or #F5F5F5 ,  #FAF0E6*/
overflow: auto;
border: 1px solid black;
margin-left: 3px;
margin-right: 5px;
* margin-right: 3px; /*for ie only*/
margin-top: 5px; 
margin-bottom: 5px;
* margin-bottom: 3px; /*for ie only*/
} 

#newscont
{
margin-left: 3px; 
margin-right: 3px;
}

#footer
{
background-color: #C1CDCD;
width: 790px;
height: 90px;
color: gray;
text-align: center;
border: 5px solid white;
}


#footerbord
{
width: 788px;
height: 88px;
border: 1px solid black;
}

--12/23: edited the css, used the * selector to provide ie with a different height to make the div's line up the same in ie and mozilla/fb--

again, any info on what this looks like in other browsers, earlier ie's, moz/fb, etc., and what it does and doesn't work in would be great. Also, I usually don't like using the css hacks so if anyone see's an obvious reason why I'm having to, I would appreciate it.
Thanks much!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 3 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Re: beat it to *beep* and let me know what's wrong

cmose wrote:
I know there a few issues with this, one specifically that is the most visually obvious to me is that the height of the leftcont div and news divs is significantly shorter in ie then in moz/fb, this is b/c for the hight to look good in ie, it would overflow its container in moz/fb. I realize that there is probably a browser hack I could employ to tidy this up but I am entirely unfamiliar with those so I would very much appreciate any suggestions. Also if those with other browses could check this out and let me know what it works in/doesn't work in. Any suggestions to make it better or fix things that break in various browsers would also be greatlyi appreciated. Thanks much for any and all input and thanks to those here who helped me work out some of the kinks along the way (any design suggestions are also welcome).

cmose

Am not sure what you are asking? When I look in IE and FB the height is the same for both left and news columns. In IE I do get a scroll bar, which I don't get in FB, but it is because IE seems to be reacting quicker to how close the end of the text is to the edge of the bottom.

I was able to increase the size of both divs by 10px, and it was gone, or just change both to overflow: hidden; but that depends on whether you want scroll bars if it overflows.

It is always nice to get your webpage to look nice in all browsers, but you can spend hours doing it. What is more important is to make sure it is functional in all browsers. At the moment it is functional in IE and FB.

For example - overflow: auto; works for both IE and FB but the standard is overflow: visible; therefore for it to work properly in other more standard browsers you will need to put in some hacks.

Do some research on which browsers supports what in CSS1 and CSS2, and on the various hacks to show CSS to various browsers.

Tony has a good list of links to what works, and here is a good start for hacks http://css-discuss.incutio.com/?page=CssHacks

Regards
Day

The only way to learn is to do it yourself

cmose
Offline
Regular
Last seen: 18 years 1 day ago
Joined: 2003-12-05
Posts: 14
Points: 0

let me know what it works in and doesn't work in plz.

daybreak,
thanks for that info. If you look at the page in ie 6 and fb side by side, you will see that the space between the leftcont/news divs and the footer div is different between the two browsers. For the leftcont/news divs to have the right spacing in fb, they have to be shorted in ie and vice versa. I would also appreciate any info on what browsers this does and doesn't work with.
thanks.

cmose
Offline
Regular
Last seen: 18 years 1 day ago
Joined: 2003-12-05
Posts: 14
Points: 0

let me know what it works in and doesn't work in plz.

any input on visual, design, compatability, useability, etc., would be appreciated (a bump for more input Wink )