473,846 Members | 1,861 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

firefox, ie put different padding in two-column-with-footer layout

I'm pursuing the holy grail of creating a two-column CSS layout with
footer AND where the colors of the columns actually go all the way
down.

The code is below.

Here is a graphic of how it looks in each IE and FIREFOX:
http://www.tanguay.info/web/examples...xIeProblem.png

Does anyone have any idea what I might try to get both IE and FIREFOX
to render this layout similarly? I've noticed that Explorer has
problems with padding many times, but don't know how to fix this one.

Thanks,

Edward Tanguay
All my projects: http:/www.tanguay.inf o

---

<head>

<style>

#siteWrapper {
position:relati ve;
text-align:left;
background:ligh tgreen url("images/rightBackground Grey.png") repeat-y
top right;
width:760px;
}

#contentWrapper {
position:relati ve;
text-align:left;
background:ligh tgreen url("images/rightBackground Grey.png") repeat-y
top right;
width:760px;
}
#rightcol {
position:relati ve;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
}

#centercol {
position:relati ve;
width:560px;
}
#footer {
position:relati ve;
background-color:beige;
text-align:center;
clear:both;
}

#main p {
margin: 0;
}

</style>
</head>

<body>

<div id="siteWrapper ">

<div id="contentWrap per">

<div id="rightcol">
<p>This can be text that explains things on the right.</p>
</div>

<div id="centercol" >
<p>Issues with this layout:</p>
<p>No matter how much texch text you add to this center area, the
columns left and right expand around it, hard to do in CSS actuallyNo
matter how much text you add to this center area, the columns left and
right expand around it, hard to do in CSS actuallyNo matter how much
text you add to this center area, the columns left and right expand
around it, hard to do in CSS actuallyNo matter how much text you add to
this center area, the columns left and right expand around it, hard to
do in CSS actuallyNo matter how much text you add to this center area,
the columns left and right expand around it, hard to do in CSS
actually.</p>
</div>
</div>

<div id="footer">
<p>The is the footer where you can put in some kind of phrase or
more links, etc.</p>
</div>

</div>

</body>
</html>

Aug 3 '06 #1
2 2067
On 2006-08-03, Edward wrote:
I'm pursuing the holy grail of creating a two-column CSS layout with
footer AND where the colors of the columns actually go all the way
down.

The code is below.

Here is a graphic of how it looks in each IE and FIREFOX:
http://www.tanguay.info/web/examples...xIeProblem.png

Does anyone have any idea what I might try to get both IE and FIREFOX
to render this layout similarly? I've noticed that Explorer has
problems with padding many times, but don't know how to fix this one.
See: <http://cfaj.freeshell. org/testing/edward.html>
--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 3 '06 #2
Whenever I have issues with margins and padding I always kick off with
the following code:

margin: 0px;
padding: 0px;
border: 0px;

Basically my first goal is to get them looking the same (which this
should do).

I then build up from there.

One note about an IE bug that might catch you out on these - if you
float and have a margin on the same side as the float (eg float: right;
margin-right: 10px; or float:left; margin-left: 10px;) IE will double
the margin for some reason. To get round this issue use display:inline
in the item in the id/class in question.

Hope that this helps mate!

Regards,

Rick

Aug 4 '06 #3

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

Similar topics

5
28865
by: Gustaf Liljegren | last post by:
I use to trust Firefox, but in this case, I don't know what to think. My test page: http://gusgus.cn/test/index.html IE6 does the right thing. The containting <div> is 600px, and within it, there's one <div> of 400px and another of 200px, laying side by side. The right <div> has padding on the left and right, to add some space within the box, but Firefox (0.9.2) seem to confuse paddings as margins. Here's the right <div> in my CSS:
17
4042
by: autogoor | last post by:
Hi, I am trying firefox and mozilla and found they are not as good as ie in terms of css. For example, here is my css table#maintb{ border : 0px solid; width : 677px; height : 100%; font : xx-small Verdana, Arial, Helvetica, sans-serif; }
7
4073
by: Tony LaPaso | last post by:
Hi All, I have a simple style sheet example below and I'm seeing different results in IE 6 vs. Firefox 1.0.3. I'm not sure which browser is rendering it correctly but I'm tending to think it's IE. In the code below you will see two styled <p> elements within the <body> element. There are two aspects of the rendering I wanted to ask about. First, notice that Firefox simply ignores the "width:500px" rule
4
7789
by: Viken Karaguesian | last post by:
Hello all, I'm have an annoyance I can't seem to solve. I'm working on a website that has a sidebar floating to the right. In the sidebar is an unordered list. In IE and in Opera, the list shows up as I want - aligned left. In FF, the list displays in the middle of the sidebar, totally ignoring the margin, it seems. In fact the main menu, which is styled similarly, also shows the same issue. You can see an example here: ...
24
3116
by: JB | last post by:
Hi All, This is doing my head in! Please help. I've built a simple <ul> to serve as a menu for a page I'm working on. I have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and compact with no extra spacing - but in Microsoft Internet Explorer 6 there are huge gaps between each list item. URL :http://217.154.67.191/left_menu.htm
2
4232
by: tradmusic.com | last post by:
Hi. Trying to create a roll-over button effect using CSS and it's working great in Firefox: http://www.nathonjones.com/sitc/salmon.shtml However, it looks totally different in IE. The first button is a different size to the others, and all of the others seem to have a margin at the top, so the colour fill, on hover, doesn't fill the correct area! Can anyone see anything obvious that I'm missing as I've tried combinations of things
1
3071
by: supergrover1981 | last post by:
Gidday gang, I've been teaching myself CSS over the past 2 days and for the most part I thought I had it all working. All the problems I've had have been in IE...until now. If anyone could offer any suggestions, I'd be most appreciative. Site can be viewed here: http://johnbayne.com/hiclone1/2.html The problem I have is this: in the (usually abominable) IE 6, the page aligns pretty much how I want it. There's three different <div>...
1
2943
by: Dave Woodwater | last post by:
Hi, I'm trying to build a camera control menu bar for a web application. I've gotten everything to work in IE6/7 but Firefox as a little bug. Actually, it's probably IE that handles it incorrectly but does what I want it to do, but you get the idea. I have 3 divs.
9
4022
by: derker | last post by:
hi, i am going crazy trying to figure this out. it seems like it should be real easy and probably is, but im kind of a nube flying by night so any thoughts or suggestions would be greatly appreciated. So here's my dilemma my h1/h2 (brand) heading is seemingly 5 px higher in firefox than it is on safari (mac user) and its driving me nuts!!! I have tried going back through it and rebuild this simple page many times but alas to no avail. the code...
0
9879
marktang
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...
0
10978
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
10643
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...
1
10705
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,...
0
9477
agi2029
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...
0
5716
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...
0
5907
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4521
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
2
4113
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.