473,322 Members | 1,409 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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

---

<head>

<style>

#siteWrapper {
position:relative;
text-align:left;
background:lightgreen url("images/rightBackgroundGrey.png") repeat-y
top right;
width:760px;
}

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

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

#main p {
margin: 0;
}

</style>
</head>

<body>

<div id="siteWrapper">

<div id="contentWrapper">

<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 2027
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
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,...
17
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 :...
7
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...
4
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...
24
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...
2
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...
1
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...
1
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...
9
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.