Forum Moderators: not2easy
this is the xhtml code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>div dreamerscode homepage</title>
<link rel="stylesheet" type="text/css" href="div npdreamerscode.css"/>
<img class="rightpink" src="rightpink.jpg" width="162" height="33" />
<img class="leftpink" src="leftpink.jpg" width="162" height="33" />
<p class="products">Products<p />
<p class="information">Information<p />
"Information" is to go on the left hand side written on "leftpink" image
"Products" is to go on the rigt hand side written on "right pink" image
Below is the css
.leftpink
{position:absolute;
left:68px;
margin-top:270px;
z-index:-1;
}
.information
{position:absolute;
font-family: "Monotype Corsiva", cursive;
font-weight:medium;
font-size: 25px;
left:90px;
margin-top:269px;
color: #000099
}
.rightpink
{position:absolute;
right:78px;
margin-top:270px;
z-index:-1;
}
.products
{position:absolute;
font-family: "Monotype Corsiva", cursive;
font-weight:medium;
font-size: 25px;
right:123px;
margin-top:269px;
color: #000099
}
Life was good and the page is rendering as expected in Safari, IE8 and Mozilla but Opera isnt having it.....
The image on the left is too high and the text is to low - not doing what its supposed to! Please tell me what it is that Im supposed to do to fix this glitch!
Any ideas?
Also another question......do I have to use <div> while building a site?
Thanking you in advance
<p class="products">Products<p />
First, validate your document [validator.w3.org]. This will kick an error, should be
<p class="products">Products</p>
(opinion, unrelated, no need to use XHTML & XHTML doctype if your document is plain html.)
I'm presuming these are just relevant portions, of course there's no closing head tag, body tag, etc.
Get it to render in standards compliance mode, and the problem may go away.
do I have to use <div> while building a site?
No, and the fewer "divs" you use, the more semantically correct your document will be. Paragraphs should be paragraphs, lists lists, tables for tabular data. A div is a generic element to divide up a page when no other element applies; it has no inherent "meaning" that describes it's content.
Any style you wish to apply to a div can be applied to a semantic element, use divs sparingly.
An example in action, in your above code, the document will be more semantically correct if the paragraphs are unordered lists, styled to do display the way you want. What is a navigation? A list of links.
And apologies for taking your time on such basic things...like not closing the tag properly (cringes!)
Being a newbie and not really knowing what Im doing Im appreciative of your advice :)
I know nothing about checking my document in standard compliant mode how to I check my document in it? ...Ive read a bit on it and am assuming Im in Quirk mode? Ive downloaded Safari, IE8, Opera (their latest versions)and open my notepad in those browsers my default is Mozilla ....please advise
Thankyou for letting me know that div arnt as important as I though - thats a big relief
And yes in future before requesting help I will validate my document first....
Thanks
Thanks in advance
XHTML has a little bit different set of standards than HTML 4.01. Many call it more strict, claiming it makes for "cleaner code" but you get that same result with a validated strict HTML 4.01 doctype. Your XHTML syntax is fine (minus the errors) but the reason I bring it up is XHTML is designed to do things HTML cannot. If you're just creating HTML and don't need XHTML features, it can make life a little easier (and better represents the document.)
Returning to your problem, if you upload your page somewhere, then visit the link I gave you, you would enter your uploaded URL into the validator. It will tell you if it validates, and the errors it finds. Often these cascade, so you may have only one or two errors but it cascades down though the document telling you have 100 errors. Just start at the top, fix the ones you can recognize, and work your way down.
The eventual goal is to render in Standards Compliance Mode which will reduce the cross browser problems you'll experience. This should be your first stop for any new design or heavy mods to an existing design, it will cut the emergency re-do's when the phone rings . . .
You can tell the render mode at any time buy accessing the page properties in most browsers. In FireFox, locate some background area, right-click and select "View Page Info." You will see "Quirks Mode" or "Standard Compliance Mode" next to Render mode.
Thanks very much :)
