Firefox and align problems

gigafare · #1 (**permalink**) 12-23-06, 01:42 PM

I've been editing my webpage to turn tables into divs to optimize for SEO and loading time. Turned out quite okay but i'm getting a few problems in Firefox and Opera.

Oh and can someone (I've been really careful i think looking at XHTML details) try to explain some of the errors i get when validating?
http://validator.w3.org/check?uri=ht...y.com%2Fdiv%2F

Link: http://www.vhtechnology.com/div/

Main questions:

1. How can i center my entire design?

2. The Firefox differences?

CSS

Code:

body {
background-color: #24B2ED;
}

.header {
position: absolute;
margin: 0px;
left: 0px;
top: 15px;
height: 59px;
width: 497px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}
.header2 {
position: absolute;
margin: 0px;
top: 15px;
left: 497px;
height: 59px;
width: 250px;
background-color: #15A2E8;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.header3 {
position: absolute;
margin: 0px;
left: 0px;
top: 74px;
height: 170px;
width: 495px;
}

.header4 {
position: absolute;
margin: 0px;
top: 74px;
left: 496px;
width: 249px;
height: 170px;
}

.inleiding {
position: absolute;
margin: 0px;
left: 0px;
top: 243px;
height: 231px;
width: 497px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

.vb {
position: absolute;
margin: 0px;
top: 243px;
left: 496px;
height: 230px;
width: 249px;
background-color: #3CADE9;
border: 1px solid #FFFFFF;
}

.propakket {
position: absolute;
margin: 0px;
top: 473px;
left: 0px;
height: 135px;
width: 249px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}

.propakket2 {
position: absolute;
margin: 0px;
top: 607px;
left: 0px;
height: 29px;
width: 247px;
}

.standaardpakket {
position: absolute;
margin: 0px;
top: 473px;
left: 248px;
height: 135px;
width: 249px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}

.standaardpakket2 {
position: absolute;
margin: 0px;
top: 607px;
left: 248px;
height: 29px;
width: 247px;
}

.blauw {
color: #2F9EE2;
font-family: Arial;
margin-left: 4px;
}

.nieuwsplaats {
position: absolute;
margin: 0px;
top: 473px;
left: 497px;
height: 165px;
width: 250px;
background-color: #FFFFFF;
}

.oranje {
color: #C4721C;
font-family: Arial;
margin-left: 4px;
}

.tekst{
color: #000000;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
}

.nieuwsklein{
color: #4564B6;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
font-weight: Bold;
}

.wit{
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
}

.languit{
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
line-height: 22px;
}

p.leftmargin {
margin-left: 4px;
}

.figuur {
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.figuur2 {
border-bottom: 1px solid #8BD6FF;
}

.figuur3 {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.reclame {
position: absolute;
margin: 0px;
top: 638px;
left: 0px;
height: 93px;
width: 493px;
}

.case {
position: absolute;
margin: 0px;
top: 638px;
left: 497px;
height: 94px;
width: 249px;
background-color: #5B84CA;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.footer {
position: absolute;
margin: 0px;
top: 736px;
left: 0px;
height: 18px;
width: 747px;
text-align: right;
word-spacing: 30px;
}

.copyright {
position: absolute;
margin: 0px;
top: 759px;
left: 0px;
height: 18px;
width: 747px;
text-align: right;
}

a.link:link { font-family: Arial; color: #FFFFFF; font-size: 12px;   text-decoration: none; } 

a.link:visited { font-family: Arial;  color: #FFFFFF; font-size: 12px;  text-decoration: none; } 

a.link:active { font-family: Arial;  color: #FFFFFF; font-size: 12px;  text-decoration: none;  } 

a.link:hover { font-family: Arial;  color: #000000; font-size: 12px; text-decoration: underline;  }

HTML (look at View Source)

gigafare · #2 (**permalink**) 12-26-06, 04:10 AM

can anyone give it a shot, i'm really in the dark here?

That validating error e.g. it says the <head> isn't supposed to be there, but where else is it supposed to be?

Alan+61415484049 · #3 (**permalink**) 12-26-06, 06:05 AM

Before you try anything else, remove the duplicated opening tag for the head element.

Code:

<HTML LANG="nl">
<HEAD>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<title>VH Technology - Wij bouwen uw website</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Validators aren't as clever as browsers, but they can help. This is what HTML Tidy has to say about your homepage:

Code:

line 5 column 1 - Warning: discarding unexpected <head>
line 22 column 380 - Warning: <img> attribute with missing trailing quote mark
line 27 column 2 - Warning: missing </span> before <p>
line 28 column 1 - Warning: inserting implicit <span>
line 28 column 1 - Warning: missing </span> before <h4>
line 34 column 1 - Warning: inserting implicit <span>
line 35 column 6 - Warning: replacing <p> by <br>
line 35 column 6 - Warning: inserting implicit <br>
line 40 column 3 - Warning: missing </span> before <p>
line 41 column 1 - Warning: inserting implicit <span>
line 46 column 1 - Warning: missing </span> before <p>
line 47 column 1 - Warning: inserting implicit <span>
line 53 column 1 - Warning: missing </span> before <p>
line 54 column 1 - Warning: inserting implicit <span>
line 81 column 3 - Warning: missing </span> before <p>
line 82 column 1 - Warning: inserting implicit <span>
line 96 column 31 - Warning: entity "&copy" doesn't end in ';'
line 22 column 380 - Warning: <img> proprietary attribute "breng"
line 22 column 380 - Warning: <img> proprietary attribute "klanten"
line 22 column 380 - Warning: <img> proprietary attribute "aan"
line 22 column 380 - Warning: <img> proprietary attribute "en"
line 22 column 380 - Warning: <img> lacks "alt" attribute
line 27 column 2 - Warning: trimming empty <span>
line 40 column 3 - Warning: trimming empty <span>
line 46 column 1 - Warning: trimming empty <span>
line 53 column 1 - Warning: trimming empty <span>
line 81 column 3 - Warning: trimming empty <span>

0 errors / 27 warnings

Clean that lot up and let's see the result...

ps
It's a good idea to be consistent in using either upper or lower case when creating html documents.
Browsers couldn't care less, you can even mix it up, just for fun...

Code:

<td style="color:#000;background:wHiTe">Lorem ipsum...</td>

This is about developing your own style of authoring, fine-tuning your code to make it easy to scan & find errors such as this.

There's a few techniques to center-align the whole document.

You could always try nesting your page in a frameset nested in a frameset, as seen at Graphic Guru IrfanView, who defines the width of his content frame and leaves it up to the browser to ensure the left/right frames are the same width.
All too hard for me, & even firefox can't bookmark the inside pages.

Here's one of my all-time favourite style snippets:

Code:

margin: 0 auto 0;

Good Luck!

gigafare · #4 (**permalink**) 12-26-06, 09:38 AM

I already could narrow it down to 0 errors making it validated, great!

I'm still having trouble centering the page. Can you check what i did wrong?

http://www.vhtechnology.com/div/

HTML Page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML LANG="nl">
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<title>VH Technology - Wij bouwen uw website</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="container">
	
<div class="header">
	<br /><img src="img/vhtechnology.jpg" title="Logo" alt="Logo VH Technology" />
	</div>

<div class="header2"></div>

<div class="header3"><img class="figuur" border="0" src="img/cmsdemocmsmanager.jpg" title="CMS Demo" alt="CMS Demo"></div>

<div class="header4">
	<img class="figuur" src="img/navigatie.jpg" title="Navigatie" alt="Website ontwerp Diensten"><br /><a href="#"><img class="figuur" border="0" src="img/klanten.jpg" title="Klanten website ontwerp" alt="Info over en voor klanten" /></a><br /><a href="#"><img class="figuur" border="0" src="img/partners.jpg" title="Partners website ontwerp" alt="Partners" /></a><br /><a href="#"><img class="figuur" border="0" src="img/brengeenklantaan.jpg" title="Commissie" alt="Breng klanten aan en verdien" /></a>
	</div>

<div class="inleiding">
	<h1 class="blauw">Wij bouwen uw website</h1>
	<p class="tekst leftmargin">
VH Technology bouwt professionele websites die eenvoudig zijn in onderhoud. Onze klanten laten ons het ontwerp,
de ontwikkeling, optimalisatie en ondersteuning uitvoeren als één totaalpakket. 
<br /><br />
Onder leiding van Kim Van Huynegem slaat een klein team freelancers de handen in elkaar om een professionele en rendabele website af te leveren. 
<br /><br />
<h4 class="oranje">
Uw website kan meer opbrengen dan ze kost<br />Maak een afspraak om onze diensten te leren kennen
</h4>
	</div>
	
	<div class="vb">
		<img class="figuur2" src="img/vb_beausejour.jpg" title="Logo" alt="Logo VH Technology" />
		<p class="leftmargin wit">
			<strong>Le Beausejour Ardenne</strong><br />Vakantiehuizen in Rochehaut (Ardennen). Ontwerp van een dynamische website.
		</p>
	</div>
	
<div class="propakket">
<p class="leftmargin languit">
	<strong>Professioneel pakket</strong><br />
Uniek website ontwerp<br />CMS Manager om zelf te onderhouden<br />Toevoegen inhoud<br />Search Engine Marketing campagne<br />1 Jaar Hosting + eigen domeinnaam<br />
</p>
</div>

<div class="standaardpakket">
<p class="leftmargin languit">
<strong>Standaard pakket</strong><br />
Uniek website ontwerp<br /><strike>CMS Manager om zelf te onderhouden</strike><br />Toevoegen inhoud<br /><strike>Search Engine Marketing campagne</strike><br />1 Jaar Hosting + eigen domeinnaam<br />
</p>
</div>

<div class="propakket2">
<a href="#"><img class="figuur3" border="0" src="img/vanaf1295.jpg" title="Professioneel Website Ontwerp" alt="Professioneel Website Ontwerp" /></a>
</div>

<div class="standaardpakket2">
<a href="#"><img class="figuur3" border="0" src="img/vanaf595.jpg" title="Standaard Website Ontwerp" alt="Standaard Website Ontwerp" /></a>
</div>

<div class="nieuwsplaats">
	<p class="leftmargin">
<a href="#" class="nieuwsklein">VH Technology stopt het gebruik van tabellen in lay-outs</a>
</p><p class="leftmargin tekst">
Geen tabellen meer! Althans voor de opmaak en indeling van webpagina's, alleen nog voor het structureren van data waarvoor tabellen oorspronkel bedoeld zijn.
</p>
</div>

<div class="reclame">
<a href="#"><img class="figuur" border="0" src="img/advertentie.gif" title="Klanten website ontwerp" alt="Info over en voor klanten" /></a>
</div>

<div class="case">
		<p class="leftmargin wit">
			<strong>Le Beausejour Ardenne</strong><br />Vakantiehuizen in Rochehaut (Ardennen). Ontwerp van een dynamische website.
		</p>
</div>

<div class="footer">
<a href="#" class="link">Home</a>
<a href="#" class="link"> Diensten</a>
<a href="#" class="link"> Producten</a>
<a href="#" class="link"> Resellers</a>
<a href="#" class="link"> Referenties</a>
<a href="#" class="link"> Contact</a>
</div>

<div class="copyright">
<span class="tekst">Copyright &copy; 2005 - 2007 VH Technology</span>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" border="0" height="31" width="88"></a>
  </p>

</div>

</div>

</body>
</html>

CSS

Code:

html, body {
text-align:center;
background-color:#24B2ED;
}

.container {
margin:0 auto;
width:748px;
text-align:left;
}
.header {
position: absolute;
left: 0px;
top: 15px;
height: 59px;
width: 497px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}
.header2 {
position: absolute;
margin: 0px;
top: 15px;
left: 497px;
height: 59px;
width: 250px;
background-color: #15A2E8;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.header3 {
position: absolute;
margin: 0px;
left: 0px;
top: 74px;
height: 170px;
width: 495px;
}

.header4 {
position: absolute;
margin: 0px;
top: 74px;
left: 496px;
width: 249px;
height: 170px;
}

.inleiding {
position: absolute;
margin: 0px;
left: 0px;
top: 243px;
height: 231px;
width: 497px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

.vb {
position: absolute;
margin: 0px;
top: 243px;
left: 496px;
height: 230px;
width: 249px;
background-color: #3CADE9;
border: 1px solid #FFFFFF;
}

.propakket {
position: absolute;
margin: 0px;
top: 473px;
left: 0px;
height: 135px;
width: 249px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}

.propakket2 {
position: absolute;
margin: 0px;
top: 607px;
left: 0px;
height: 29px;
width: 247px;
}

.standaardpakket {
position: absolute;
margin: 0px;
top: 473px;
left: 248px;
height: 135px;
width: 249px;
background-color: #5B84CA;
border: 1px solid #FFFFFF;
}

.standaardpakket2 {
position: absolute;
margin: 0px;
top: 607px;
left: 248px;
height: 29px;
width: 247px;
}

.blauw {
color: #2F9EE2;
font-family: Arial;
margin-left: 4px;
}

.nieuwsplaats {
position: absolute;
margin: 0px;
top: 473px;
left: 497px;
height: 165px;
width: 250px;
background-color: #FFFFFF;
}

.oranje {
color: #C4721C;
font-family: Arial;
margin-left: 4px;
}

.tekst{
color: #000000;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
}

.nieuwsklein{
color: #4564B6;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
font-weight: Bold;
}

.wit{
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
}

.languit{
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
font-stretch: ultra-condensed;
line-height: 22px;
}

p.leftmargin {
margin-left: 4px;
}

.figuur {
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.figuur2 {
border-bottom: 1px solid #8BD6FF;
}

.figuur3 {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.reclame {
position: absolute;
margin: 0px;
top: 638px;
left: 0px;
height: 93px;
width: 493px;
}

.case {
position: absolute;
margin: 0px;
top: 638px;
left: 497px;
height: 94px;
width: 249px;
background-color: #5B84CA;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.footer {
position: absolute;
margin: 0px;
top: 736px;
left: 0px;
height: 18px;
width: 747px;
text-align: right;
word-spacing: 30px;
}

.copyright {
position: absolute;
margin: 0px;
top: 759px;
left: 0px;
height: 18px;
width: 747px;
text-align: right;
}

a.link:link { font-family: Arial; color: #FFFFFF; font-size: 12px;   text-decoration: none; } 

a.link:visited { font-family: Arial;  color: #FFFFFF; font-size: 12px;  text-decoration: none; } 

a.link:active { font-family: Arial;  color: #FFFFFF; font-size: 12px;  text-decoration: none;  } 

a.link:hover { font-family: Arial;  color: #000000; font-size: 12px; text-decoration: underline;  }

jfulton · #5 (**permalink**) 12-26-06, 11:24 AM

Try adding position:relative to the container class.

Code:

.container {
...
position:relative;
}

gigafare · #6 (**permalink**) 12-26-06, 01:19 PM

of course...!
Thanks a lot

Now i got to fix the last thing; a FireFox problem it's not showing all the containers properly though length and width are specified

jfulton · #7 (**permalink**) 12-26-06, 03:49 PM

Looks like a margin issue. I added this and it looked better.

Code:

p, h3, h2, h1{
margin-top:0;
}

I'm not sure if that's what you really want though...

I noticed that you are using all absolute positioning...Keep in mind that this has potential to be a pain if you want to change around the content in the future (ie. add more content in some of the blocks.) Also, look at what happens when the font size is increased on your page. Just some things to keep in mind.

gigafare · #8 (**permalink**) 12-30-06, 04:48 AM

Exactly so i figuered this below would have been the solution except that it doesn't change anything. Putting auto instead of visible shows scrollbars (only in Firefox though)

.inleiding = the big white space

http://www.vhtechnology.com/div/

Code:

.inleiding {
position: absolute;
margin: 0px;
left: 0px;
height: 231px;
top: 243px;
width: 497px;
overflow: visible;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

Alan+61415484049 · #9 (**permalink**) 12-30-06, 11:58 AM

The page is looking good...what ideas for your media-dependent style sheets?

Your design would stand out on a mobile phone; or in a powerpoint-type projected presentation.

I read somewhere that sans-serif fonts are easier to read on a screen; the dead-tree version is easier to read in serif.
I guess that means Times New Roman - any other suggestions?

gigafare · #10 (**permalink**) 12-31-06, 06:11 AM

I really don't understand what you mean by all that sorry.

What i meant is: if the font increases it's not visible anymore in the length specified containers. That's why I figuered overflow: visible; would help but it doesn't.