473,604 Members | 2,487 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

3 floated DIVs in a row in IE - gap between last two DIVs - why?

I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.

When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a vetical bar with the page's background color).

What's going on? How do I get IE to play ball?

I've written a simplified test case; see the HTML below, or
http://home.exetel.com.au/tas/boxgap/test01.html

Thanks,
Tasman

p.s. I notice Firefox has vertical space before the text in the first
two DIVs, and no vertical space before the text in the third DIV. Does
anyone know why this is?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test02 </title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body {
background-color:#ffcc00;
}
div#logo {
float:left;
height:91px;
width:135px;
background-color:#e0d2be;
}
div#sitemenu {
float:left;
height:91px;
width:407px;
background-color:#e0d2be;
}
div#emailjoin {
height:91px;
background-color:#e0d2be;
}
</style>
</head>

<body>

<div id="logo">
<p>logo</p>
</div>

<div id="sitemenu">
<p>site menu</p>
</div>

<div id="emailjoin" >
<p>join our emailing list</p>
</div>

</body>
</html>

Jan 30 '06 #1
2 8263
Els
ta**********@gm ail.com wrote:
I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.

When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a vetical bar with the page's background color).

What's going on? How do I get IE to play ball?

http://home.exetel.com.au/tas/boxgap/test01.html
Well, you *don't* have 3 floating divs.
You have 2 floating divs, and one that isn't floated.
p.s. I notice Firefox has vertical space before the text in the first
two DIVs, and no vertical space before the text in the third DIV. Does
anyone know why this is?


Floated divs act differently than non-positioned divs.
In the the first two divs, the top-margin of the <p> is encompassed in
the div. In the third div (not floated) it isn't.
If you'd put a border on the third, or a padding, or float it, the
same space would be there.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Genesis - More Fool Me
Jan 30 '06 #2
Thanks Els!
I added "float: left" to the last DIV and it works fine.
The fixed page is at http://home.exetel.com.au/tas/boxgap/test02.html

Tasman

Els wrote:
ta**********@gm ail.com wrote:
I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.

When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a vetical bar with the page's background color).

What's going on? How do I get IE to play ball?

http://home.exetel.com.au/tas/boxgap/test01.html


Well, you *don't* have 3 floating divs.
You have 2 floating divs, and one that isn't floated.
p.s. I notice Firefox has vertical space before the text in the first
two DIVs, and no vertical space before the text in the third DIV. Does
anyone know why this is?


Floated divs act differently than non-positioned divs.
In the the first two divs, the top-margin of the <p> is encompassed in
the div. In the third div (not floated) it isn't.
If you'd put a border on the third, or a padding, or float it, the
same space would be there.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Genesis - More Fool Me


Jan 31 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2555
by: Zaka Ferenc | last post by:
Hi all, the page http://info.etr.elte.hu/divtest5.html looks as I expected in IE6 and Opera 7.11, but the floated divs float out of the containing blocks (divs) in NN7.1 and Opera 7.0 (what I don't want). Questions are: 1) IE & Opera7.11 or NN & Opera7.0 display correctly the page ? 2) If IE & Opera7.11 work well is there a workaround for NN & Opera7.0 ? 3) If NN & Opera7.0 are the correct ones how can I make this page to look the...
3
5004
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or height:auto) the larger div doesn't seem to see the nested divs, and they spill out the bottom. IE seems to automatically resize the larger div as long as I set the height to 100% or any pixel size. Mozilla doesn't recognize the percent, and...
2
2082
by: BenOne© | last post by:
Hi all, I'm trying to create an image gallery with CSS but I can't get the thumbnails to center horizontally as a group. The page, including css defined in the <HEAD> is located at: http://homepages.ihug.com.au/~benst/pictures/photography/css_problems.html Please note there are only 2 thumbnails on the page so it won't bring your internet connection to its knees.
3
2852
by: Lee K. Seitz | last post by:
I'm redesigning this page for more up-to-date browser standards: <http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>. Note the use of an "invisible" table to position the "visible" ones. I'm attempting to get a similar layout using CSS. So far the best I've come up with is <http://home.hiwaay.net/~lkseitz/hhs2/winners.shtml>. (CSS at <http://home.hiwaay.net/~lkseitz/hhs2/hhs.css>.) The problems (all Windows): 1. In IE 6 and NN 7,...
1
1353
by: alex | last post by:
Hey all, May have missed this in the FAQ, advice or article links welcome. Have a content div with a navigation div floated left and an advertisement div floated right. I would like to have a border going around the content, the two divs and right down to the bottom. So far, all I've got is this:
2
3039
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated and the number of them can vary greatly. They are all contained within a parent table cell, which is centred on the page. But I am unable to find a way of centering these table cells within the parent cell.
2
1717
by: Pete Horrobin | last post by:
Having spent quite a while tweaking a design to appear as I want, and everything looking good, I tried one last test -- and of course the result differs between FF ("wrong") and IE6 ("right"). I tried Googling for an answer, but gave up after tutorial 27 (of 1.8 million), so I'm hoping one of the experts will be able to oblige! The problem: 3 column layout, with left and right floated columns having a defined
2
2170
by: Ben C. | last post by:
Hi If I have a container div and inside the container div I float two divs (one left and one right), the containting div will collapse as the floated divs will no longer prop it up, meaning that any background colour or image on the containing div will not be visible. Now, suppose I put left and right padding on the containing div. How come, if the containing div has collapsed, does the padding of the container still apply to the two...
7
1457
by: Ed Jay | last post by:
I have two divs. The left div is floated left and the right div is floated right. If the left div contains a single line, the left and right divs are on the same line (obviously). But...the left div content is dynamic and its content can occupy two or three lines, When it contains more than one line, the right div is positioned on the top line of the left div content. I need (want) it to be positioned on the last (lowest) line of the left...
0
8419
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8409
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8280
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
5882
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5441
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
3907
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2434
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1526
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1266
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.