I'm new to all this and have just successfully written a very simple external style sheet and an html page and viewed it in IE. However when I try to view it in Firefox, I have none of the layout and the text just spans across the page.
Here's the link (I said it was simple..
):
<!-- m --><a class="postlink" href="http://www.s126980356.websitehome.co.uk/">http://www.s126980356.websitehome.co.uk/</a><!-- m -->
Any advice appreciated
Joe#joewalkdenbanner
{position: absolute;
top:"50px";
left:"30px";
height:"40px";
width:"910px";
background-color:"black"
}There's no need for the quotes#joewalkdenbanner{
position: absolute;
top:50px;
left:30px;
height:40px;
width:910px;
background-color:#000;
}Remove them throughout your stylesheet.cool
thanks, that works
Now though, do you know why there's a space above the font in my heading and in photos when I preview in Firefox? Are there often differences when you use different browsers with CSS?
Cheers
JoeTwo of your best friends for debugging HTML and CSS:
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/cool">http://jigsaw.w3.org/css-validator/cool</a><!-- m -->
thanks, that works
Now though, do you know why there's a space above the font in my heading and in photos when I preview in Firefox? Are there often differences when you use different browsers with CSS?
Cheers
Joe
You may need to explicitly set the margin-top and/or padding-top to 0 for those elements.PS: using a valid doctype on your page will get IE out of "quirks" mode and increase the chances of it displaying per the standards and thus similar to FF's output.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.2">http://www.w3.org/TR/html4/struct/global.html#h-7.2</a><!-- m -->
I recommend you use the strict dtd unless you have a specific reason not to (i.e., you're using framesets).Sorry to be dumb but how exactly would I do that. And, talking of margins, I'd like to be able to put a margin not just on the left in my columns, but on the top , bottom and right as well. Any ideas?
Another question: is there a way I can get the text to run from the first column into the second column. I.e. is there a way of linking the two.
Finally, I know next to nothing about tables and as a complete beginner, have gone straight into CSS as a layout tool. Am I doing the right thing?
Thanks everyonediv{
margin: 0;
padding: 0;
}
You're certainly right not to be using tables for layout: why tables for layout is stupid (<!-- m --><a class="postlink" href="http://hotdesign.com/seybold">http://hotdesign.com/seybold</a><!-- m -->).
Also, to handle the bugs in various browsers, particuarly the ones in IE check out: position is everything (<!-- m --><a class="postlink" href="http://positioniseverything.net/">http://positioniseverything.net/</a><!-- m -->).thanks
should I put strict dtd at the top of css and html files?p.bannertext
{
margin: 0;
font-family: Georgia, Times New Roman, Times, serif;
text-indent: 0.2cm;
font-size: 30px;
color: white;
}thanks
should I put strict dtd at the top of css and html files?Doctypes are only for HTML.I can see I'm going to have to mess around with this for a bit. I put the strict dtd doctype at the top and when I previewed in IE it went all over the shop....Sorry to be dumb but how exactly would I do that.
Add these lines to the top of your document (replacing the current HTML tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<!-- rest of HEAD section and document follows... -->
And, talking of margins, I'd like to be able to put a margin not just on the left in my columns, but on the top , bottom and right as well. Any ideas?
You can assign the all 4 margins starting from the top then in clockwise order:
margin: 10px 0 20px 30px;
Another question: is there a way I can get the text to run from the first column into the second column. I.e. is there a way of linking the two.
No.
(Maybe with some clever server-side programming, but not with HTML/CSS alone.)
Finally, I know next to nothing about tables and as a complete beginner, have gone straight into CSS as a layout tool. Am I doing the right thing?
YES!!! CSS is for visual presentation, tables are for marking up tabular data.This forum is great - I really appreciate everyone's replies. I'll be back soon!
Here's the link (I said it was simple..
):<!-- m --><a class="postlink" href="http://www.s126980356.websitehome.co.uk/">http://www.s126980356.websitehome.co.uk/</a><!-- m -->
Any advice appreciated
Joe#joewalkdenbanner
{position: absolute;
top:"50px";
left:"30px";
height:"40px";
width:"910px";
background-color:"black"
}There's no need for the quotes#joewalkdenbanner{
position: absolute;
top:50px;
left:30px;
height:40px;
width:910px;
background-color:#000;
}Remove them throughout your stylesheet.cool
thanks, that works
Now though, do you know why there's a space above the font in my heading and in photos when I preview in Firefox? Are there often differences when you use different browsers with CSS?
Cheers
JoeTwo of your best friends for debugging HTML and CSS:
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/cool">http://jigsaw.w3.org/css-validator/cool</a><!-- m -->
thanks, that works
Now though, do you know why there's a space above the font in my heading and in photos when I preview in Firefox? Are there often differences when you use different browsers with CSS?
Cheers
Joe
You may need to explicitly set the margin-top and/or padding-top to 0 for those elements.PS: using a valid doctype on your page will get IE out of "quirks" mode and increase the chances of it displaying per the standards and thus similar to FF's output.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.2">http://www.w3.org/TR/html4/struct/global.html#h-7.2</a><!-- m -->
I recommend you use the strict dtd unless you have a specific reason not to (i.e., you're using framesets).Sorry to be dumb but how exactly would I do that. And, talking of margins, I'd like to be able to put a margin not just on the left in my columns, but on the top , bottom and right as well. Any ideas?
Another question: is there a way I can get the text to run from the first column into the second column. I.e. is there a way of linking the two.
Finally, I know next to nothing about tables and as a complete beginner, have gone straight into CSS as a layout tool. Am I doing the right thing?
Thanks everyonediv{
margin: 0;
padding: 0;
}
You're certainly right not to be using tables for layout: why tables for layout is stupid (<!-- m --><a class="postlink" href="http://hotdesign.com/seybold">http://hotdesign.com/seybold</a><!-- m -->).
Also, to handle the bugs in various browsers, particuarly the ones in IE check out: position is everything (<!-- m --><a class="postlink" href="http://positioniseverything.net/">http://positioniseverything.net/</a><!-- m -->).thanks
should I put strict dtd at the top of css and html files?p.bannertext
{
margin: 0;
font-family: Georgia, Times New Roman, Times, serif;
text-indent: 0.2cm;
font-size: 30px;
color: white;
}thanks
should I put strict dtd at the top of css and html files?Doctypes are only for HTML.I can see I'm going to have to mess around with this for a bit. I put the strict dtd doctype at the top and when I previewed in IE it went all over the shop....Sorry to be dumb but how exactly would I do that.
Add these lines to the top of your document (replacing the current HTML tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<!-- rest of HEAD section and document follows... -->
And, talking of margins, I'd like to be able to put a margin not just on the left in my columns, but on the top , bottom and right as well. Any ideas?
You can assign the all 4 margins starting from the top then in clockwise order:
margin: 10px 0 20px 30px;
Another question: is there a way I can get the text to run from the first column into the second column. I.e. is there a way of linking the two.
No.
(Maybe with some clever server-side programming, but not with HTML/CSS alone.)Finally, I know next to nothing about tables and as a complete beginner, have gone straight into CSS as a layout tool. Am I doing the right thing?
YES!!! CSS is for visual presentation, tables are for marking up tabular data.This forum is great - I really appreciate everyone's replies. I'll be back soon!