Hi,
I'm pretty new to web development and I just spent the better part of the morning trying to figure out this IE bug. I came up with a hack that makes no sense to me. I would appreciate if someone could explain why this situation occurs, and if there is a better solution!
I am trying to stack 2 divs on top of each other. The divs should be 5 pixels tall and touching each other. (In my website, these are actually containers for top and bottom rounded-corners images, so they must be no taller than the background-image I'm putting inside each of them). It works in Firefox, but in IE, the divs become much larger.
The hack that I came up with is to set font-size: 4px in the body style, as shown below. This forces the divs to the correct height even though the divs contain no text, and even though I explicitly set the div's height to 5px (which seems to have no effect in IE).
Here is some very simplified code that exhibits the problem. It does validate. -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-
<html>
-
<head>
-
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
-
<link href="styles.css" rel="stylesheet" type="text/css" />
-
<title>Test</title>
-
</head>
-
-
-
<body>
-
-
<div id="myDiv1"></div>
-
<div id="myDiv2"></div>
-
-
</body>
-
-
</html>
-
-
And the CSS: - body, p, ul, a, img {
-
padding: 0;
-
margin: 0;
-
text-decoration: none;
-
border: none;
-
font-size: 4px; //This is the hack that fixes the spacing in IE
-
}
-
-
#myDiv1 {
-
background-color: #ff0000;
-
height: 5px;
-
}
-
-
#myDiv2 {
-
background-color: #000000;
-
height: 5px;
-
}
-
Can anyone reveal the nature of this mystery so that I can deal with it properly in the future? Thanks! =)
1  2104 
I've seen this happen as-well. Acually, thanks for the tip.
I bet it has something to do with how IE handles empty tags , kinda like when you make a table and you have an empty cell.
recommend this
<tr>
<td> </td>
</tr>
instead of
<tr>
<td></td>
</tr>
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Stanimir Stamenkov |
last post by:
Here are two cases regarding inline-level elements' line-height,
padding and background, which I doesn't understand:
<div style="background: black; color: white; line-height: 1.5">
<span>Abc</span>
<span style="background: white; color: black; line-height:
3">Abc</span>
<span>Abc</span>
</div>
|
by: Kepler |
last post by:
How do you get the height of the client browser in IE? Both
document.body.clientHeight and document.body.offsetHeight return the
height of the document. If the page is long and there's a vertical
scrollbar, you get the height of the entire document, screwing up any
chance of centering a window in the browser using these values.
Is there a way to get the height of the actual browser window and not
the entire page height?
Thanks.
|
by: Francois du Toit |
last post by:
Can someone confirm this:
http://www.purpleray.za.net/opera_bug.html
|
by: TheXenocide |
last post by:
Hello,
First and foremost I'll describe a bit about my problem: I'm trying to
make a site layout using ASP.NET 2.0 in Visual Studio .NET 2005 Beta 2.
The site is a table based layout that is supposed to consume the entire
viewing area (oldschool HTML was <table width="100%" height="100%">).
This is not as easy as it sounds using the forementioned technologies.
I am using some ASP.NET 2.0 controls that specifically depend on the
way...
|
by: Haines Brown |
last post by:
I have a style for a list:
dl { line-height: 1; margin-bottom: 1em; }
But the W3C CSS validator says:
Line: 124 Context : dl
Invalid number : line-height Parse Error -
| | |
by: R144N |
last post by:
Hi Everyone,
I have finally taken the step to bring a site to the 21st century with HTML 4.01 with the height tag having been deprecated.
I have read numerous articles claiming that the CSS height will do the trick, however, it works only with the first table in the body each with a height of 100%.
My issue is that the other nested tables for layout and images take on the height of the body table at time of render but do not dynamically...
|
by: =?Utf-8?B?UGhpbCBKb2huc29u?= |
last post by:
Hi,
I have a gridview and I need it to display correctly in Opera.
I need to set the row height, so that even on the last page of data all the
rows are the same height as on the other pages.
In IE and firefox, setting a height in the rowstyle of the gridview and not
setting any height on the grid works really well... exactly what I need.
|
by: doug |
last post by:
I am loading some HTML into a lightbox div via AJAX.
What I would like to do is load the HTML into the lightbox div (a
scrollable one), then get the height of the content of the div (not
the height of the div itself which would is fixed).
Then I would like to resize the div to be the height of the content.
How can this be done? What are some attributes in the DOM that I
should look at besides height?
|
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...
|
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,...
|
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...
| | |
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...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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...
|
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...
|
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...
|
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...
| |
