I am having a spacing problem above and below my divs that are positioned "relative". In FireFox space is added above and below my div whereas the page displays correctly in IE on the PC. If you view my page in FireFox, you will see that the right column has spaces below the "Featured Products" heading and the line to the left of the text block that sits below it. The same problem is occurring with the div that follows with the heading "Latest News". Hopefully someone can give me some guidance. Here is my page and style sheet:
My page: www.embeddedins ight.com/lightwire/kat
My style sheet: www.embeddedins ight.com/lightwire/kat/css/lightwire_style s.css
Thank you for your help.
Katrina
14  14138 
You have 7 HTML errors and 13 CSS errors, some directly related to the right column. IDs are unique names that are only allowed once per page.
Never use IE as a reference for something that is working. IE is nine years behind web standards or incorrect in its implementation. Always test in Firefox, Opera or Safari first; then adjust for IEs quirks and bugs.
Thanks for your help. I have validated my css page. My html page has one error due to a center tag, that I need to keep because the center attribute I defined in my style sheet doesn't actually center the text.
My problem remains.. Space above and below my right column divs that are positioned relative.
Katrina
I've been gone all day so late getting back to this. Just a quick look but IE may be expanding your wrapper div to contain the absolutely positioned elements. This is a bug in IE and should not happen. Firefox is performing correctly. The fix I don't have time for right now; maybe later tonight.
Hello.. thanks. The problem is that firefox is not displaying correctly. When you look at the page, you will see that in the right hand column there is space between the "Featured Products" and the vertical line below (a left border to a div that contains the featured products text). Below that sits the "Latest News" heading and also below that rectangle, the left vertical border of the content is separated by a space. I'm really stumped here, I really appreciate the help.
Katrina
Firefox is displaying what you wrote. IE is displaying what you want but not what you wrote. As I said, IE is displaying its "expanding box" bug.
Busy again today. More on this later.
To center your page, remove the <center> and </center> tags. Then, in your css, in #wrapper, add:
margin: 0 auto;
I didn't look into your second <center> tag.
As I said above, the problem lies in IEs improper expansion of the containing elements around the absolutely positioned elements. These elements are removed from the normal flow and the parent containers should collapse to the size of their content, which is what they properly do in Firefox, and will also in Opera and Safari.
To see this, in #h_top, do
background-color:blue;
and adjust the width, if necessary, and you'll see it. I don't know what is covering up that background.
There is too much going on for me to work on this. I do not believe absolutely positioning everything is necessary and it rarely is.
Thank you for your info. Because of the extra space that firefox "correctly" adds, I had to make the bottom margin of the div for "latest news" and "featured products" equal to -8px. Then position that on a layer that sits above the content with the vertical line. The vertical line joins up exactly at the base of the title box on firefox, but on a pc the line overlaps, but is not visible because it is covered by the title box that is sitting on the layer above it.
After getting the line to abut the box in both instances, I then had to give the content text some breathing room. As it worked for me, ie does not read padding-top, and firefox does not read margin-top. So I specified the desired space for each platform in the div to have it render correctly.
Perhaps my solution is a bit of a hack job, but at this point, it displays correctly and I can work on other parts. If there is a better way, I'm all ears.
- If there is a better way, I'm all ears.
I would just suggest, as I did above, to consider not using absolute positioning for every element. This is an unusual choice and problems like this frequently crop up.
Other places on the 'net even advocate never using absolute positioning, something I think is a totally wrong position to take.
I didn't use absolute positioning for that area. The positioning is relative with a top-margin.. or is that considered absolute positioning?
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: skullcap |
last post by:
Is there any way using HTML 4.01 of wrapping text and other inline
elements into an 'L' or 'C' shaped space in a table - i.e. telling the
browser that a series of table cells which don't form a square, line, or
rectangle should all be considered as part of the same inline block?
What i want it for is I'm using a two column table to display a series of
images with text, and I want the images opposite the centre of each text
section, with...
|
by: Eric |
last post by:
Is it possible to set up a <ul> with <li> and now have the default
blank line above and below the list itself?
Thanks,
Eric
|
by: Gustaf Liljegren |
last post by:
I continued on the example shown earlier today:
http://gusgus.cn/test/index.html
Now I get some unwanted space in Firefox (the red space just below the
first image) which doesn't appear in IE6. I've double-checked the CSS
for any padding or margings than may cause it, but have found none. How
can I remove it?
Thanks,
|
by: skeeterbug |
last post by:
http://www.geocities.com/operationsengineer1/test2.htm
the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.
http://www.geocities.com/operationsengineer1/test3.htm
it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
|
by: lkrubner |
last post by:
Am I wrong, or do paragraphs have extra space on top in FireFox, when
compared to Microsoft IE. The top of this page is an example:
http://www.publicdomainsoftware.org/index.php?pageId=299
The text in the box at top looks like it has an extra 10 or 20 pixels
of padding at the top, when FireFox is compared to IE. Why is that?
| | |
by: skyleestar |
last post by:
We've tried looking for a discussion on this but haven't found any fixes yet that seem to work.
When you go to our website, www.MillbrookTack.com, in FireFox there is unwanted white space above our Welcome Image/Map. This is not a problem in Internet Explorer.
Please help! :)
|
by: javakid |
last post by:
How can i reduce the space above and below list?
Is their any way i can write some attribute in <ul> ?
Any suggestions
Regards
|
by: roscoedesign |
last post by:
html: http://roscoecreations.com/exitpro/
css: http://roscoecreations.com/exitpro/css/style.css
If you view the page in Firefox you will see what it is supposed to look like. For some reason IE6 is creating space above and below the nav and footer divs. I just can't fix this. Any help would be great. Thanks.
|
by: normanthesquid |
last post by:
I am just starting to get into the basics of CSS and HTML, and have a specific design in mind, very inspired by Digg .
However, When I try to imitate their title bar, i end up with a section of blank space above the header.
Any thoughts?
css:
#damtitle h1
{
|
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: 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: 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...
|
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();...
|
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: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
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...
| |
