ShoalBear Posted September 7, 2009 Share Posted September 7, 2009 Not sure if this would go here or in CSS...but my CSS seems to be ok, as it works fine in Firefox...Any suggestions?? body { background-color: #000000; font-family: Angelina; font-size: 28pt; color: #DAA520; margin-top: 0px; margin-bottom: 0px;} #header { width: 85%; background-position: center center; height: 215px; text-align:center; align: center;} #main { width: 80%; padding: 10px;}#main, #menu { display: table-cell;}#mainwrapper{ border-collapse: collapse; display: table; table-layout: fixed;}#menu { width: 20%; font-size: 14pt; font-family: Angelina; padding: 10px;}/*menu style */a.menu:link { color: #DAA520;}a.menu:visited { color: #DAA520;}a.menu:focus { color: red; background-color: green;}a.menu:hover { color: red; background-color: green;}a.menu:active { color: #DAA520; background-color: green;}a:link { color: blue; text-decoration:none;}a:visited { color: green; text-decoration:none;}a:focus { color:red; text-decoration:none;}a:hover { color:red; text-decoration:none;}a:active { background-color: yellow; text-decoration:none;} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Language" content="en-us"><LINK REL=stylesheet HREF="main.css" TYPE="text/css"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Highland Roses Design TEST</title></head><body><div id="body"><div id="header"> <img src = "http://www.highlandrosesdesign.com/header.gif"></div><div id="mainwrapper"><div id="menu"><p><victorian.htm" class="menu"> Victorian <br> Wallpaper <br> Collection</a></p> <p><a href="simplyfab.htm" class="menu"> Simply <br> Fab</a></p> <p><a href="celebration.htm" class="menu"> Celebration</a></p> <p><a href=".htm" class="menu"> Not <br> Your <br> Grandma's <br> Quilted <br> Ornaments</p> <p><a href="team.htm" class="menu"> Taking <br> One <br> for <br> the <br> Team</p> <p><a href="everythingelse.htm" class="menu"> Everything <br> Else</a></p></div><div id="main"> <p><a href="victorian.htm""><img border="0" src="http://lh5.ggpht.com/_7tElEpmE5fs/SiwY25ed8_I/AAAAAAAAAGQ/bT7wRCofYQU/s144/babydoe.jpg" /><br> Victorian Wallpaper Collection</a></p> <p><a href="simplyfab.htm"><img border="0" src="http://lh6.ggpht.com/_7tElEpmE5fs/SiwVOq3DQ5I/AAAAAAAAAE0/yiPHhRxSCww/s288/fabredivorygreen.jpg" /><br> Simply Fab</a></p> <p><a href="celebration.htm"><img border="0" src="http://lh3.ggpht.com/_7tElEpmE5fs/SiwVMS0VWuI/AAAAAAAAAEs/XfZ0P-xdySA/s144/confettigreen.jpg" /><br>Celebration</a></p> <p><a href="notgrandma.htm"><img border="0" src="http://lh5.ggpht.com/_7tElEpmE5fs/Sizoo1nVg4I/AAAAAAAAAII/0si6QTqkaAA/s144/Greensleevesboth.jpg" /><br>Not Your Grandma's Quilted Ornaments</p> <p><a href="http://www.highlandrosesdesign.com/team.htm">Taking One for the Team</p> <p><a href="everythingelse.htm"><img border="0" src="http://lh6.ggpht.com/_7tElEpmE5fs/SiwVQNVNYqI/AAAAAAAAAE4/PB4l5JTF4ho/s144/gothicblack2.jpg" /><br>Everything Else</a></p> </div></div><div id="header"> <img src = "http://www.highlandrosesdesign.com/header.gif"></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2009 Share Posted September 7, 2009 After a quick look:you have two <div id="header"> when they should be unique, and used once only within a page.align: center; is not valid, whereas text-align: center;(left,right) or vertical-align: middle; (vertical-align values) is.small point, the normal/default anchor links should be placed above the menu anchors, as any changes within the menu anchors, could be overwritten by the following normal/default anchor links (see below).a:link { color: blue; text-decoration:none;}a:visited { color: green; text-decoration:none;}a:focus { color:red; text-decoration:none;}a:hover { color:red; text-decoration:none;}a:active { background-color: yellow; text-decoration:none;}/*menu style */a.menu:link { color: #DAA520;}a.menu:visited { color: #DAA520;}a.menu:focus { color: red; background-color: green;}a.menu:hover { color: red; background-color: green;}a.menu:active { color: #DAA520; background-color: green;} Link to comment Share on other sites More sharing options...
ravenshade Posted September 7, 2009 Share Posted September 7, 2009 I'm not sure of the exact purpose of ID, but some browsers just prefer classes rather than IDs. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2009 Share Posted September 7, 2009 If you wish to target a specific element for assigning a specific css, or access by javascript DOM, you would use an id.example for outer, header, left, right, main content containing divsIf you wish to target multiple element you would use a class instead.example for multiple elements inside the containing div, <p><h2> can have different coloured text assign to themh2.h_color1{color: red;}h2.h_color2{color:lime}p.p_color1{color: blue;}p.p_color2{color:yellow;}<h2 class="h_color1">Header 1</h2><p class="p_color1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color2">Header 2</h2><p class="p_color2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color1">Header 1</h2><p class="p_color2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p><h2 class="h_color2">Header 2</h2><p class="p_color1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> Link to comment Share on other sites More sharing options...
ShoalBear Posted September 9, 2009 Author Share Posted September 9, 2009 Unfortunately, it is not working in IE with it being classes either.....Any other suggestions....trying to stay away from using tables... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.