12  1843 
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").
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 / show the columns individually, anyone ever needed to
do this and have any suggestions.
|
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 fixed-width column
that acts as the page's sidebar, while the right column contains the
main text of the page.
The tricky part is that inside the right column is another table, 1x1,
that's aligned to the bottom right of the table cell, such that...
|
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 and no it can't happen differently) then
the 3rd column overlays itself over the middle column's content. Is there
a css-based 3 column layout without ugly hacks that will give me a 3rd
column as far to the right as need be? Can anyone suggest a...
|
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 link to the page: http://www.retroweb.net/dev/8/
If anyone could help, I'd be extremely grateful.
|
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 displaying a line above their respective labels. Here are the
html and css snippets:
<fieldset class="radio">
<legend>Credit card</legend>
| | |
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 generated) content. As there is also a following
footer DIV, the usual floating one of the DIVs technique doesn't give the
desired results, and has the floated DIV (if it is the longest one) being
displayed/rendered through the footer DIV.
I...
|
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 them both to float left and gave the
menu-div a fixed with.
This looks like this: http://users.skynet.be/louke/test.html
|
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 the 2nd and
3rd columns fill the remaining space but I've given up on that and am
willing to settle for the second row to have a fluid 3-column layout
(or something else simple).
Anyway, I've developed a page where the second row has this 3...
|
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 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
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: 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: 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: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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
|
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...
| |
