473,702 Members | 2,552 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

some layout problems in firefox and IE

Hi there,

simply.amandade vries.com/index.html

The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:

1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.

I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...

2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?

Thanks in advance!
Amanda

Jun 13 '07 #1
2 2948
On 2007-06-13, ottawamom <am*******@gmai l.comwrote:
Hi there,

simply.amandade vries.com/index.html

The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:

1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.
You're setting width: 100% and auto left and right margins on #nav. But
this can't work: if the width is 100% there aren't going to be any left
and right margins.

The menu items (HOME, SERVICES, etc) are themselves floats so they
always float to one side or another. They won't ever be centered in
their container.

So one solution is to provide a container to shrink-wrap the menu items
and then to centre that container. The only suitable containers with
shrink-to-fit behaviour are given by display: inline-block or display:
table, neither of which work in IE (and the former doesn't work in FF
either).

The alternative is to make the menu items display: inline and to set
text-align: center on their (full-width) container. This means making
everything inside them display: inline too (you've got display: block
set on anchor for example) rather than floating everything.

If you do make everything inline you won't be able to set widths on
things any more so each li will just have to be as wide as its contents.
But that might be OK since they don't have any borders or anything but
just sit on that blue background.
I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...
I'd be tempted just to get used to the idea of it all being
left-aligned rather than centered.
2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?
There are some devious tricks out there to do this (called things like
"the holy grail") but they're too clever if you ask me and not necessary
in this case. The .container's height is given by the height of the
right col, so make .container position: relative (so it becomes the
containing block for .leftcol) and add to .leftcol:

position: absolute; top: 0; bottom: 0;

and remove from it the float and clear properties. Might as well get rid
of display:block too, since it's implied by position:absolu te (or
float).

The reason height:100% doesn't work on the float is because its
container's height is auto. You can't do percentage heights of auto
height containers generally speaking since that's a bit of a circular
requirement.
Jun 13 '07 #2
Ben,

Thanks, your comments are always helpful without being condescending!
Much appreciated.

Amanda
On Jun 13, 5:26 pm, Ben C <spams...@spam. eggswrote:
On 2007-06-13, ottawamom <amanda...@gmai l.comwrote:
Hi there,
simply.amandade vries.com/index.html
The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:
1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.

You're setting width: 100% and auto left and right margins on #nav. But
this can't work: if the width is 100% there aren't going to be any left
and right margins.

The menu items (HOME, SERVICES, etc) are themselves floats so they
always float to one side or another. They won't ever be centered in
their container.

So one solution is to provide a container to shrink-wrap the menu items
and then to centre that container. The only suitable containers with
shrink-to-fit behaviour are given by display: inline-block or display:
table, neither of which work in IE (and the former doesn't work in FF
either).

The alternative is to make the menu items display: inline and to set
text-align: center on their (full-width) container. This means making
everything inside them display: inline too (you've got display: block
set on anchor for example) rather than floating everything.

If you do make everything inline you won't be able to set widths on
things any more so each li will just have to be as wide as its contents.
But that might be OK since they don't have any borders or anything but
just sit on that blue background.
I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...

I'd be tempted just to get used to the idea of it all being
left-aligned rather than centered.
2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?

There are some devious tricks out there to do this (called things like
"the holy grail") but they're too clever if you ask me and not necessary
in this case. The .container's height is given by the height of the
right col, so make .container position: relative (so it becomes the
containing block for .leftcol) and add to .leftcol:

position: absolute; top: 0; bottom: 0;

and remove from it the float and clear properties. Might as well get rid
of display:block too, since it's implied by position:absolu te (or
float).

The reason height:100% doesn't work on the float is because its
container's height is auto. You can't do percentage heights of auto
height containers generally speaking since that's a bit of a circular
requirement.

Jun 14 '07 #3

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

Similar topics

7
11649
by: Matt Kruse | last post by:
This is a typical layout, but I have specific requirements. I'm trying to figure out a) if it's possible to meet the requirements and b) if so, how. +---------------+ | header | +---------------+ | body | | (scrollable) | +---------------+ | footer |
7
2893
by: Xavier Onassis | last post by:
I would be grateful for recommendations for a CSS layout (header, 2 cols, footer) that can accomodate dynamically added elements. I am not having any luck so far getting this to work in Mozilla/Firefox. Success so far only with IE. In Mozilla/Firefox, the layout does not adjust when nodes are inserted into the document dynamically. Layout: H E A D E R COL1 COL2
3
2358
by: Dave | last post by:
I am designing a web page using VS2003 ASP.NET. The page contains various DIVs (panels), one of which is in grid layout. The controls in this DIV render correctly in IE, but when using Firefox they are incorrectly positioned. VS sets the positioning of the controls to absolute, and because the DIV is to the right of another DIV Firefox (correctly, I suspect) positions the controls absolutely, which means they are too far to the left, while...
11
12315
by: Ben Holness | last post by:
Hi all, I am having some trouble with some table code. It works fine in Internet Explorer, but the layout doesn't work correctly in Firefox 1.0.7 Is this a firefox bug, or am I missing something in the HTML? It is pretty simple code! (Plus it is valid according to the w3c validator) The layout problem is in the third row. I cannot get the embedded table (with the top and bottom cells) to be the full height of the cell (unless
2
2063
by: Edward | last post by:
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/twoColumnWithFooterFirefoxIeProblem.png Does anyone have any idea what I might try to get both IE and FIREFOX
11
16563
by: Grischa Brockhaus | last post by:
Hi, I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the bottom using fixed height and a content layer using what's left of the browsers window. So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px and the content is defined as top:40px;bottom:40px; This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement...
7
2621
by: Daniel Kabs | last post by:
Hi there, for a long time I've been using tables to layout elements on a web page. Example: Say we have a 2x2 table and I'd like to put text (left aligned) and buttons (right aligned) in the top right table cell. These elements should stay on one line and the table should keep a minimum width in order to prevent wrapping. -------------------------------------------------
7
1563
by: Michael7 | last post by:
Hi Everyone, I created my website with extremely simple HTML coding. I aimed at having the website accessible to even really old browsers, to make it as accessible to everyone as possible, even those without the newer versions and browsers (with some exceptions where absolutely necessary). If you wish to see what I mean by simple and everything, my website is http://workmenforChrist.org However, after all this time, I truly am tired...
7
2203
by: amishguy | last post by:
Hello, I am having an issue with a site I'm creating right now. I have had this issue before and I would like to figure out what the solution is instead of using workarounds as I have in the past. A little background: I have a php based site. The layout is a table based layout that was generated by slicing a large image. Most of the pages that I have problems with use PHP includes which I think has something to do with the issue.
7
2255
by: lawpoop | last post by:
On Mar 11, 6:58 pm, Bergamot <berga...@visi.comwrote: Berg, thanks for taking the time to look at this. Here is the URL ( sorry for the delay in response): http://nerdcraft.net/survey.html I have the grid of 1-5 questions and radio button answers layed out in a table. I couldn't find a tutorial for a css grid, so I hacked it for now. Ideally, I would like to have the question layout in css.
0
8738
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
8652
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,...
1
8979
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
8939
tracyyun
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...
0
7829
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...
1
6575
isladogs
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...
0
5907
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();...
0
4412
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...
2
2399
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.