Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
HTML CSS Code not working!
Options
-
05-08-2008 7:39am#1Hi there everyone, i have the website www.tramoresurfshop.com, as you can see it is not very good for spiders/crawlers/robots due to the fact that i made site using photoshop and spliced the images, thus giving me tables and lots of images and not very much text!
Now im redesigning to make the site more efficient on search engines, by coding the site using html and css and dropping the tables. The new design can be seen here [url]httP://tramoresurfshop.ismysite.co.uk/[/url]. Though my site came out perfect in IE7 when i view it in opera and mozilla firefox 3.0 numerous problems occured and the format that the site has in IE7 is lost, can someone please tell me if i have a problem with my code or what i need to do.
Thanks nick!
<qoute>
the index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="images\favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>Tramore Surf Shop</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Search Engine Data -->
<META name="title" content="Tramore Surf Shop" />
<META name="description" content="Tramore Surf Shop is an Irish Surf Shop located in
Tramore, Waterford, Ireland and sells surfboards, wetsuits, kayaks and skateboards."/>
<META name="keywords" content="tramore, waterford, ireland, surfing, surf, shop, surfboards, bodyboards, kayaks, wetsuits,
surf lessons, surfing lessons, learn to surf, webcam, surf report, ding repair, cafe, skatepark,
skate shop, surf shop, surfing shop, surf news, irish surf news"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="homePage">
<div class="container">
<h1><img src="images/logo0000.jpg" alt="Tramore Surf Shop" title="Tramore Surf Shop" /></h1>
<dl id="headMenu">
<dt>Site Areas</dt>
<dd class="first"><a href="">Forum</a></dd>
<dd><a href="">Gallery</a></dd>
<dd><a href="">Team</a></dd>
<dd><a href="">Surf Lessons</a></dd>
<dd class="last"><a href="">Skate Park</a></dd>
</dl>
</div>
<dl id="mainMenu">
<dt>Main Menu</dt>
<dd class="first"><a href="">Home</a></dd>
<dd><a href="">shop</a></dd>
<dd><a href="">news</a></dd>
<dd><a href="">cafe</a></dd>
<dd><a href="">ding repair</a></dd>
<dd><a href="">about us</a></dd>
<dd class="last"><a href="">contact us</a></dd>
</dl>
<div class="outerBox">
<div class="innerBox">
<img src="images/home0000.jpg" alt="Tramore Surf Shop - Surf, Skate, Street, Paddle & Kite" title="Tramore Surf Shop - Surf, Skate, Street, Paddle & Kite" id="homepageGraphic" />
<div class="container">
<div id="liveCam">
<a href="" title="Live Cam & Surf Report"><img src="images/camera00.jpg" alt="Live Cam & Surf Report" /></a>
</div>
<div id="siteNews">
<h2>Latest News</h2>
<h3>Coming Soon!</h3>
<p>
Coming Soon!
</p>
<h3>Coming Soon!</h3>
<p>
Coming Soon!
</p>
<p id="newsFooter">
Brought to you by Tramore Surf Shop & ISA
</p>
</div>
</div>
<div id="aboutSite">
<p>
Tramore Surf Shop is located in the T-Bay Surf Centre, on the beach in Tramore, Waterford, Ireland. We specialise in selling surf hardware to the local surf community. We stock all main brands in Surfboards, Wetsuits, Kayaks and Skateboards. Our dedicated staff have over 20 years experience in surfing and are here to help you with all your needs. Please drop in and check out our little friendly beach side surf shop and enjoy a nice cuppa tea or coffee from the cafe.
</p>
</div>
<div class="container">
<a href="" title="Gift Vouchers" id="voucherImage"><img src="images/vouchert.jpg" alt="Gift Vouchers" /></a>
<a href="" title="Surf Report" id="reportImage"><img src="images/report00.jpg" alt="New surfboards for sale" /></a>
<a href="" title="Online Shop" id="shopImage"><img src="images/shop0000.jpg" alt="Online Shop" /></a>
</div>
</div>
</div>
<dl id="footMenu">
<dt>Other Site Areas</dt>
<dd class="first"><a href=""> Discussion Forum</a></dd>
<dd><a href="">Team Riders</a></dd>
<dd><a href="">Photo and Video Gallery</a></dd>
<dd><a href="">Surfing Lessons</a></dd>
<dd><a href="">Skate Park</a></dd>
<dd class="last"><a href="">Tramore Information & Safety</a></dd>
</dl>
<p id="copyright">
Copyright Tramore Surf Shop 2008 - All rights reserved
</p>
</div>
</body>
</html>
The CSS File
body {
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.76em;
background-color: #2a2a2a;
color: #eeeeee;
background-image: url('images/back0000.jpg');
}
h1 {
float: left;
margin: 0;
}
a {
color: #1a6cbf;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: underline;
}
a img {
border: 0;
}
dl, dl dd {
margin: 0;
padding: 0;
}
dl dt {
position: absolute;
left: -200em;
}
div.container {
overflow: hidden;
width: 100%;
}
div.outerBox {
border: 1px solid #aaaaaa;
padding: 0.5em;
}
div.innerBox {
border: 1px solid #666666;
padding: 0.5em;
}
div#homePage {
width: 63.2em;
margin: 0 auto;
}
dl#headMenu {
float: right;
margin-top: 2.4em;
font-size: 0.96em;
}
dl#headMenu dd {
float: left;
}
dl#headMenu dd a {
display: block;
padding: 0 0.5em;
border-right: 1px solid #aaaaaa;
}
dl#headMenu dd.last a {
border-right: 0;
padding-right: 0;
}
dl#mainMenu {
width: 100%;
overflow: hidden;
margin: 0.5em 0;
}
dl#mainMenu dd {
width: 14.27%;
float: left;
}
dl#mainMenu dd a {
display: block;
text-align: center;
font-weight: bold;
color: #ffffff;
border: 1px solid #666666;
background-color: #212121;
padding: 0.16em;
margin: 0 0.25em;
text-transform: lowercase;
}
dl#mainMenu dd a:hover {
color: #eeeeee;
border: 1px solid #eeeeee;
text-decoration: none;
background-color: #1a6cbf;
}
dl#mainMenu dd.first a {
margin-left: 0;
}
dl#mainMenu dd.last a {
margin-right: 0;
}
div#liveCam {
float: left;
width: 27em;
margin-top: 0.5em;
}
div#siteNews {
position: relative;
background-color: #212121;
margin-left: 27.2em;
margin-top: 0.5em;
border: 1px solid #666666;
height: 20.7em;
padding: 0.5em;
}
div#siteNews h2 {
margin: 0;
}
p#newsFooter {
position: absolute;
bottom: 0.5em;
right: 0.5em;
font-weight: bold;
margin: 0;
color: #666666;
font-size: 0.96em;
}
div#aboutSite {
margin: 0.25em 0;
border: 1px solid #666666;
background-color: #212121;
padding: 0 0.5em;
}
dl#footMenu {
width: 100%;
overflow: hidden;
text-align: center;
margin-top: 0.4em;
}
dl#footMenu dd {
display: inline;
}
dl#footMenu dd a {
padding: 0 0.5em;
border-right: 1px solid #aaaaaa;
font-size: 1.1em;
}
dl#footMenu dd.last a {
white-space: nowrap;
border-right: 0;
}
p#copyright {
color: #e3a866;
text-align: center;
}
#homepageGraphic {
display: block;
margin: 0 auto;
}
#voucherImage, #reportImage, #shopImage {
display: block;
float: left;
padding-right: 0.2em;
height: 152px;
background-position: bottom left;
background-repeat: no-repeat;
}
#voucherImage {
background-image: url('images/vouchers.jpg');
}
#reportImage {
background-image: url('images/report_s.jpg');
}
#shopImage {
padding-right: 0;
background-image: url('images/shop_sha.jpg');
}
</qoute>0
Comments
-
Install Firebug for Firefox. It will tell you what is wrong pretty quick.0
-
that didnt work.0
-
Im certainly not trawling through that code! heres some advice though:
install the web developer toolbar in firefox.
when you are developing from the ground up - save yourself A LOT of trouble by testing in at least IE6, 7 and FF 2 & 3 all the time.
also, to avoid using complex css hacks for various browsers i've found that this works out very handy http://rafael.adm.br/css_browser_selector/
also, what specifically is wrong format wise? I loaded up the new site in FireFox 3 and it looks good - pretty close to the original one? can you be more specific?0 -
Sorry i just assumed if you checked it in IE7 you would see the differences!
The Main buttons on top dont justify like in IE7
The manner banner moves slightly to the right
The boxes dont align properly
And the main Square image link called shop online drops under the other two images.
Thanks alot guys for your help, so far iv got some good advice.0 -
You'll have to create a different style for IE. IE and FF have different interpretations of css...
Keep your link tag and add the following before you're </head> tag.
[HTML]<style type="text/css">
<!--
@import url("style2.css");
-->
</style>
<!--[if IE]>
<style type="text/css">
@import url(ie-style.css);
</style>
<![endif]-->[/HTML]
now create "ie-style.css" file and adapt it to suit IE.0 -
Advertisement
-
You'll have to create a different style for IE. IE and FF have different interpretations of css...
Keep your link tag and add the following before you're </head> tag.
[HTML]<style type="text/css">
<!--
@import url("style2.css");
-->
</style>
<!--[if IE]>
<style type="text/css">
@import url(ie-style.css);
</style>
<![endif]-->[/HTML]
now create "ie-style.css" file and adapt it to suit IE.
i reckon this will do the trick thanks.0 -
Your problem seems to be the (incorrect) way IE handles margins and padding. So if you are using absolute values in your divs and margins and you may find out that something works in IE but not in other browsers. The other browsers are actually handling the layout correctly.
For example, the three link images at the bottom of the site have the last link "Online shop" falling down to the next line because there isn't enough space in the container DIV to fit all three images and their padding.
Best bet is to read up on IE margin bugs, and as stevie says you may need a separate CSS for IE (though avoid this if you can)0
Advertisement