Welcome to WebmasterWorld Guest from 3.80.60.248

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Display differently in IE7 and FF 3.01

CSS displays okay in IE7 but not in FF

     

gxkendall

4:25 pm on Aug 26, 2009 (gmt 0)

New User

5+ Year Member

joined:Aug 26, 2009
posts: 5
votes: 0


Hi

Fairly new to CSS. Have looked at the forum - but can't find the answer. I have also checked my CSS on the W3C CSS Validation service (no errors).

I have the CSS/HTML shown at the end of this post.

when I render this in IE7, it does what I want (i.e. I get two "blocks" with what will be a menu holder underneath it).

If I use Firefox (vers 3.01), I get the two "main" blocks separated by "white space" and the "menu bar" is at the top of the screen (and on top of the two other blocks).

I played around with moving the "menu bar" with a "top" - it does move it, but on both browsers, which is not what I want.

Any ideas?

Cheers

G

/* CSS */
/* === */

/* Outline Container */

#container {
width: 800px;
/*border: 5px solid #fff;*/
margin-left: auto;
margin-right: auto;
/*padding: 10px;*/
color: #666;
background: #CCCCCC;
}

/* Two top banners */
#headimage {
float: left;
width: 310px;
height: 160px;
padding: 0;
/*margin-bottom: 15px;*/
color: #666;
background: inherit;
}
#headtext {
float: right;
width: 400px;
height: 160px;
padding: 0;
/*margin-bottom: 15px;*/
color: #666;
background: inherit;
}

/* Horizontial Menu Bar */
#menu_container{
position:relative;
width: 800px;
height: 32px;
background:#336699 url(../images/menubar.gif) top repeat-x;
}

/*Classes */

.companyname {
font-size: 180%;
margin: 0 0 10px 0;
color:#663333;
background: inherit;
}

.clear{
clear:both;
height:1px;
overflow:hidden;
}

/* HTML */
/* ==== */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Blah</title>
<link rel="address bar icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon"/>

<meta name="Description" content="Blah" />
<meta name="Keywords" content="Blah" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Blah" />
<meta name="Robots" content="index,follow" />

<!-- <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css" /> -->
<link rel="stylesheet" href="css/style1.css" media="screen" type="text/css" />
<!-- <link rel="stylesheet" href="../css/print.css" media="print" type="text/css" /> -->

</head>

<body>

<div id = "container">

<div id="headimage">
</div> <!-- headimage -->

<div id="headtext">
</div> <!-- headtext -->

<div id="menu_container">
</div> <!-- /menu_container -->

</div> <!-- container -->

</body>
</html>

D_Blackwell

5:45 pm on Aug 26, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


Welcome to WebmasterWorld.

1) Don't design in IE. Design in Firefox or Opera or something decent - then fix for IE if necessary.

2) All you need to do is clear #menu_container. This works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#container {
width: 800px;
/*border: 5px solid #fff;*/
margin-left: auto;
margin-right: auto;
/*padding: 10px;*/
color: #666;
background: #ccc;
}

/* Two top banners */
#headimage {
float: left;
width: 310px;
height: 160px;
padding: 0;
/*margin-bottom: 15px;*/
color: #666;
background: inherit;
}

#headtext {
float: right;
width: 400px;
height: 160px;
padding: 0;
/*margin-bottom: 15px;*/
color: #666;
background: inherit;
}

/* Horizontial Menu Bar */
#menu_container {
position:relative;
width: 800px;
height: 32px;
background: #369 url(../images/menubar.gif) top repeat-x;
}

.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="headimage">
HEADIMAGE
</div>

<div id="headtext">
HEADTEXT
</div>

<div id="menu_container" class="clear">
MENU_CONTAINER
</div>
</div>
<!--##########
Fairly new to CSS. Have looked at the forum - but can't find the answer. I have also checked my CSS on the W3C CSS

Validation service (no errors).

when I render this in IE7, it does what I want (i.e. I get two "blocks" with what will be a menu holder underneath it).

If I use Firefox (vers 3.01), I get the two "main" blocks separated by "white space" and the "menu bar" is at the top of the screen (and on top of the two other blocks).

I played around with moving the "menu bar" with a "top" - it does move it, but on both browsers, which is not what I want.
-->
</body>
</html>

gxkendall

5:51 pm on Aug 26, 2009 (gmt 0)

New User

5+ Year Member

joined:Aug 26, 2009
posts: 5
votes: 0


Thank you - I'll try it very soon.

G

gxkendall

8:19 pm on Aug 26, 2009 (gmt 0)

New User

5+ Year Member

joined:Aug 26, 2009
posts: 5
votes: 0


It worked. Thank you - I really appreciate it. I would never have got there.

If somebody wants to explain why it works, that would be interesting to know.

Thx

G

D_Blackwell

8:36 pm on Aug 26, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


You have floated #headimage and #headtext, so they are just kind of hanging around without a fixed position. That's fine; just the why it is. You have followed that with #menu_container. This <div> is a block level element, a real gorilla that is throwing its weight around on your floated <div>s. They are pacifists in positioning power, and get trod upon.

To put the bully in its place you clear the floated <div>s and it follows the rules and keeps its intended place.

W3C - Floats [w3.org] - W3C is the 'go to' resource for researching how things work.

Note: You will encounter a lot of code with 'clearing <div>s'.
<div style="clear: both;">&nbsp;</div>

This sets you up for the next container. They can be handy, but are overused, IMO.

gxkendall

8:48 pm on Aug 26, 2009 (gmt 0)

New User

5+ Year Member

joined:Aug 26, 2009
posts: 5
votes: 0


Thank you - thatis very enlightening

G

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / CSS