12 1819
Before I can work on this, you have a problem with your CSS. You are relying on the property max-width. max-width does not work in IE but does in modern browsers. Therefore, setting it to 40em messes things up in Firefox, Opera, etc. So we must get your markup working in a proper browser before we can hack it for IEs many problems.
Before I can work on this, you have a problem with your CSS. You are relying on the property max-width. max-width does not work in IE but does in modern browsers. Therefore, setting it to 40em messes things up in Firefox, Opera, etc. So we must get your markup working in a proper browser before we can hack it for IEs many problems.
It works in IE7 which I was testing on. I'll have to set a width rather than max-width I guess.
IE7 is nine years behind web standards and buggy. Always test in a modern browser first. Then we can adjust for IEs quirks.
IE7 is nine years behind web standards and buggy. Always test in a modern browser first. Then we can adjust for IEs quirks.
Should I be testing in firefox 2.0? That's what I've been using as my primary
Ok, I changed my css to use a percentage width rather than use max-width. Is there a better way to achieve what I'm trying to do now that I can't use max-width? -
*{
-
padding:0;
-
margin:0;
-
font-size:100%;
-
}
-
body{
-
font-family:Arial,Verdana,sans-serif;
-
color:#666;
-
margin:0;
-
padding:0;
-
/*border:1px solid blue;*/
-
}
-
.clear{
-
clear:both;
-
}
-
#pageContainer{
-
margin:1% 10% 0 10%;
-
border-left:1px solid #999;
-
border-right:1px solid #999;
-
border-top:1px solid #999;
-
}
-
#banner{
-
padding:5px;
-
border-bottom:1px solid #999;
-
background-color:#036;
-
}
-
#banner h5{
-
/*padding:1em 0;*/
-
font-size:1.5em;
-
color:#DDD;
-
}
-
#navBar{
-
padding:10px;
-
float:left;
-
/*border:1px solid #CCC;*/
-
}
-
#navBar ul{
-
list-style-type: none;
-
}
-
#rightNavBar{
-
padding:10px;
-
float:right;
-
/*border:1px solid #CCC;*/
-
}
-
#rightNavBar ul{
-
list-style-type: none;
-
}
-
#content{
-
/*margin: 10px 15px;*/
-
float:left;
-
width:75%;
-
padding: 1em;
-
/*max-width: 40em;*/
-
border-left:1px solid #999;
-
border-right:1px solid #999;
-
}
-
#footer{
-
border-top:1px solid #999;
-
border-bottom:1px solid #999;
-
background-color:#036;
-
}
-
#footer h5{
-
font-size:.75em;
-
text-align:right;
-
color:#DDD;
-
padding:.50em .25em;
-
}
-
Should I be testing in firefox 2.0? That's what I've been using as my primary
That is a good choice, along with Opera and Safari. But do look at IE at the same time, while validating, to catch IE bugs early in the process.
That is a good choice, along with Opera and Safari. But do look at IE at the same time, while validating, to catch IE bugs early in the process.
What's the best way to ensure that my columns are the same width? There are so many annoying nuances when designing. I wish it was easier.
What's the best way to ensure that my columns are the same width? There are so many annoying nuances when designing. I wish it was easier.
Should I be using javascript to get my columns to have equal length?
I've never had any problems getting width to be the same. Can you give an example?
Height can be a little tricky but some markup is easier than others. Sometims it's as simple as 'height:100%', remembering that height would be in relation to its parent which is in relation to its parent, and so on.
Other times absolute positioning is the only way, or using trickery (google "faux columns").
I've never had any problems getting width to be the same. Can you give an example?
Height can be a little tricky but some markup is easier than others. Sometims it's as simple as 'height:100%', remembering that height would be in relation to its parent which is in relation to its parent, and so on.
Other times absolute positioning is the only way, or using trickery (google "faux columns").
I looked into the faux columns trick, but I don't really want to implement that on my site. I'll just muck around with it. I think I'll just set a fixed height on my left/right columns, and my middle content should generally be longer.
try this http://xmlci.blogspot.com/2008/01/body-margin0px-padding0px-text.html
Visit Float Box Layout overview then http://jp29.org/ for a HTML/CSS Validated three column exemplar that functions in all Browsers at different screen resolutions, including PDAs.
BTW, your use of H5 is not semantically correct -- use CSS to set the sizing parameters instead -- check the CSS of the above exemplars (via the W3C CSS Validator) for some ways to accomplish this.
James
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Don Grover |
last post by:
I have a HTML table created using ASP as a web page.
ie.
HEADING1 HEADING2 HEADING3 etc...
data 1 data2 data3 etc
and so on
How can I toggle hide /...
|
by: Sean Givan |
last post by:
I'm putting together a page layout, and I'm getting frustrated trying
to recreate a setup that I had made before, but forgotten exactly how.
The page is a table with two columns; the left is a...
|
by: Zak McGregor |
last post by:
Hi all
I have a simple 3 column css layout here:
http://www.carfolio.com/newlook.dhtml
However, when the centre column is wider than the screen (yes, it does
happen on some pages on the site...
|
by: Matt Bostock |
last post by:
Hi,
I'm a bit of a CSS newbie so please accept my apologies if this post is
inappropriate.
I can't get the 'latest news' title to move across to the right column
where it belongs. Here's a...
|
by: Mike Otten |
last post by:
Any help greatly appreciated.
The validated page is at: http://myweb.stedwards.edu/michaelo/ddtab.htm
The trouble is with the radio buttons (2/3-down the left column). The
radios are...
|
by: Xavier van Unen |
last post by:
Hi guys and gals,
I'm working on a 2 column CSS layout (for an ordering system) in which it
isn't a priori known which of the two columns will be the longest, that
depends on the (script...
|
by: Veerle |
last post by:
Hi,
I'm working on a new layout for my website. Each page consists of two
parts:
- a menu (left part of the page)
- the content (the remaining part at the right)
So I created two divs, set...
|
by: hzgt9b |
last post by:
I want a page with a centered div containing two rows. Top row has an
image and some text. The bottom row needs to have three columns. I'd
love to have the 1st column set to a fixed width then have...
|
by: Death Slaught |
last post by:
I will be showing you how to make a very simple but effective three column layout.
First we will begin with the HTML, or structure, of our three column layout.
<!DOCTYPE html PUBLIC...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
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...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
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...
| |