Hey guys.
I'm attempting to build a website for my badminton club, but for some reason the header and links bar isn't displaying correctly in some versions of IE. I'm completely new at this and I've been writing the code based off tutorials so I don't really know what I'm doing. Can anyone help?
The site is currently at http://www.hooduk.plus.com/
It seems to render correctly on the following:
FireFox & IE9 on Win 7
Dolphin HD on Android.
And has trouble on the following:
IE7 & 8 on Win XP
IE8 on Win 7
Full Version: Web design (CSS, HTML)
looks like your following an html5 tutorial, which ie < 9 doesnt support.
If your just starting out id totally ignore any html5 references as this will bring you a world of pain.
try this tutorial: http://www.cssnewbie.com/super-simple-hori...navigation-bar/
i can take a proper look outside of work later on this evening and maybe give you some pointers
If your just starting out id totally ignore any html5 references as this will bring you a world of pain.
try this tutorial: http://www.cssnewbie.com/super-simple-hori...navigation-bar/
i can take a proper look outside of work later on this evening and maybe give you some pointers
when you say 'not correctly' specifically in what way?
For the time being I wouldn't aim anything at html5, so if you want to define a character set I'd go for:
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
The wonderful theme park resort of "<html land.. should probably be "<html lang.."
As mentioned before the 'not correctly' bit is probably just munged up css sticking stuff in the wrong place. I'm currently using XP and FF/Chrome and can't see the contact link as it's gone onto the next line (and since the text is white with no background, can't be seen, unless hoverred over). I suspect there's also something in there that 1 px too large on the vertical, possibly due to padding/borders but am too lazy to check thoroughily
I plonked a whole bunch of stuff in your layout.css (most of which might be unneccessary or incorrect, if this works on your browser then cut out changes until you find the bits you're after) and made something that seems a bit better in my browser using this:
For the time being I wouldn't aim anything at html5, so if you want to define a character set I'd go for:
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
The wonderful theme park resort of "<html land.. should probably be "<html lang.."
As mentioned before the 'not correctly' bit is probably just munged up css sticking stuff in the wrong place. I'm currently using XP and FF/Chrome and can't see the contact link as it's gone onto the next line (and since the text is white with no background, can't be seen, unless hoverred over). I suspect there's also something in there that 1 px too large on the vertical, possibly due to padding/borders but am too lazy to check thoroughily
I plonked a whole bunch of stuff in your layout.css (most of which might be unneccessary or incorrect, if this works on your browser then cut out changes until you find the bits you're after) and made something that seems a bit better in my browser using this:
CODE
* {
margin:0;
padding:0;
}
header {
width:1024px;
height:232px;
margin-left:auto;
margin-right:auto;
background:url(../images/Logo.jpg) top center no-repeat;
background-color:#FFF;
}
nav {
width:1024px;
margin-left:auto;
margin-right:auto;
width:1024px;
height:33px;
background-image:url(../images/nav_bg.png);
background-repeat:repeat-x;
}
#nav_center {
}
nav ul {
list-style:none;
}
nav a {
display:inline;
float:left;
margin-right:3%;
text-decoration:none;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
padding:.5% 2% .5% 1%;
}
nav a:hover {
background-image:url(../images/nav_fg.png);
height:22px;
}
/* WRAPPER */
#wrapper {
width:1024px;
height:100%;
margin-left:auto;
margin-right:auto;
border-left:1px solid black;
border-right:1px solid black;
}
#content {
width:700px;
height:600px;
margin-left:auto;
margin-right:auto;
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
}
#right_side {
width:304;
height:100%;
float:right;
}
margin:0;
padding:0;
}
header {
width:1024px;
height:232px;
margin-left:auto;
margin-right:auto;
background:url(../images/Logo.jpg) top center no-repeat;
background-color:#FFF;
}
nav {
width:1024px;
margin-left:auto;
margin-right:auto;
width:1024px;
height:33px;
background-image:url(../images/nav_bg.png);
background-repeat:repeat-x;
}
#nav_center {
}
nav ul {
list-style:none;
}
nav a {
display:inline;
float:left;
margin-right:3%;
text-decoration:none;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
padding:.5% 2% .5% 1%;
}
nav a:hover {
background-image:url(../images/nav_fg.png);
height:22px;
}
/* WRAPPER */
#wrapper {
width:1024px;
height:100%;
margin-left:auto;
margin-right:auto;
border-left:1px solid black;
border-right:1px solid black;
}
#content {
width:700px;
height:600px;
margin-left:auto;
margin-right:auto;
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
}
#right_side {
width:304;
height:100%;
float:right;
}
Cheers monkey, i'll give it a whirl later and see how it comes out.
Ok so i've come back to this after a long while and updated a lot. The main issue seems to be that IE8 and below mostly ignore the CSS, so the top banner and the nav bar dont display properly, along with the content divs further down that split the page in two.
I have a little more understanding now of how CSS and HTML work, but I wouldnt know where to start trying to get it working in earlier IEs. Am I better off just making a duplicate site for those browsers or is there a neater way of doing things?
I have a little more understanding now of how CSS and HTML work, but I wouldnt know where to start trying to get it working in earlier IEs. Am I better off just making a duplicate site for those browsers or is there a neater way of doing things?
Your issue is in my reply above which you've chosen to ignore. Your using html5 elements where you shouldn't be. Also, that gradient on the buttons is nasty.
Good luck.
Good luck.
good point about the html5 elements... I'd steer well clear of them for now
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.