overlapping divs - HTML / CSS

spolsky

hi,
i have the following html. if padding given for the span it overlaps
the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give
sizes manually. how could i prevent this overlapping?
thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitl ed Document</title>
</head>

<body>

<div style="backgrou nd-color:#FF0000; color:#FFFFFF; clear:both">
some text before...
</div>
<div align="center" style="backgrou nd-color:#FFFF00;" >
<span style="backgrou nd-color:#66CC99; color:#FFFFFF; padding:7px;">
The content.
<select>
<option>1111</option>
<option>2222</option>
<option>3333</option>
</select>

</span>
</div>
<div style="backgrou nd-color:#FF0000; color:#FFFFFF">
some text after...
</div>
</body>
</html>

Aug 19 '06 #1

Subscribe Reply

2259

Nije Nego

On 19 Aug 2006 06:40:57 -0700, spolsky wrote:

hi,
i have the following html. if padding given for the span it overlaps
the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give
sizes manually. how could i prevent this overlapping?
thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitl ed Document</title>
</head>

<body>

<div style="backgrou nd-color:#FF0000; color:#FFFFFF; clear:both">
some text before...
</div>
<div align="center" style="backgrou nd-color:#FFFF00;" >
<span style="backgrou nd-color:#66CC99; color:#FFFFFF; padding:7px;">
The content.
<select>
<option>1111</option>
<option>2222</option>
<option>3333</option>
</select>

</span>
</div>
<div style="backgrou nd-color:#FF0000; color:#FFFFFF">
some text after...
</div>
</body>
</html>

Decrease the width of the divs for the value of padding width.

--
buy, bought, bye

Aug 19 '06 #2

Similar topics

25744

How to stop divs overlapping?

by: Peter Jenkins | last post by:

I have some divs I am using to get a two column layout for a section of a page, like so; <div1> <div2> <div3> blah blah blah blah blah blah blah blah blah blah blah blah </div> </div> </div>

HTML / CSS

12895

Overlapping Images

by: Mitch | last post by:

I have 2 rectangle images. 1 with a box in the upper left corner and the other with a box in the lower right hand corner. Both images are the same size. I would like to display these 2 images so that it looks like 1 image by overlapping them using css. I have tried creating a seperate div for each image and setting the top/left the same on both and changing the layer on each. This only made the 2nd one display directly below the first...

HTML / CSS

5050

Overlapping divs in Firefox until refresh

by: gpbmike | last post by:

I'm wondering if anyone else has had this problem before. Every now and then a div on my page will overlap with another. Thi only happens in firefox (vs. IE and Safari) and it corrects itself whe you refresh the page. Has anyone run into this before? Thanks -- gpbmik

HTML / CSS

5107

overlapping divs in IE

by: Daphne Tregear | last post by:

Is there every anything other than woe with IE...? I'm working on a redesign for my hobby pages in my personal home space before re-exporting them back to where they belong. I've based the redesign on Ben Meadowcroft's templates which behave impeccably. Under IE using text sizes 'small' and 'smallest' the RHS div ends up overlapping the central content div. I've worried at this for so long I'm at the stupid stage. ...

HTML / CSS

19748

Overlapping div is not overlapping

by: Kalvin | last post by:

I am very new to CSS and am trying to set up 2 divs in the same space on the page. The idea is that div1 will be an informational message only displayed sometimes. When there isn't a message to be put there, then div1 will be hidden and div2 content will be visible. The problem I am having with this is that the content is still lining up right beneath each other. If I make div1 hidden, then there is just white space where it used to...

HTML / CSS

2606

Overlapping DIVs killing links

by: michelle koen | last post by:

Hi Folks, on <a href="http://donbrice.com/new/page.php?section=schools">this page</a> and for all the sections I can't get Safari(2.02) or Firefox-PC(1.5) or the latest vers. of Opera-Mac to recognise that the navigation links (menucol) if the div behind it (container-page) overlaps. As far as I've tested it renders as desired in IEmac, FfoxMac1.0.6, NNmac7.2, and IE6-PC.

HTML / CSS

4816

mousemove for overlapping divs

by: Jakub Åukomski | last post by:

hi. i've got a problem as follows, to which i can't find a solution to: i've got two divs, which are completely independent of each other (neither is a parent of child of another). they're positioned (either absolutely or relatively) in a way that they overlap each other. when i assign an onmousemove event to them, only one of them catches it. any capturing and/or bubbling is beeing performed by parents of the div that caught the...

Javascript

3205

Overlapping DIVs: one isn't blocking the other

by: Liam Gibbs | last post by:

Hello everyone. I'm having a problem with a web page. What I have is one DIV (a header) overlapping the border around another DIV (a menu block). I want this, because I want to put this header overtop the border of the menu. The problem is that the border is still showing through the text, giving it a strikethrough appearance. What I need is for the menu header to block that part of the border. An example is here:...

HTML / CSS

8888

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8752

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9257

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

9113

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

8097

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6702

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA

6011

Couldn’t get equations in html when convert word .docx file to html file in C#.

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();...

C# / C Sharp

4784

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2635

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP