IPB





Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Web design (CSS, HTML)
Qrbrrbl
post Mar 1 2012, 09:31 AM
Post #1


Man at arms
****

Group: Clan Members
Posts: 152
Thank(s): 1
Points: 152
Joined: 28-April 10
Member No.: 4,262
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


--------------------
Go to the top of the page
 
+Quote Post
Magik5
post Mar 1 2012, 11:01 AM
Post #2


Paddle Master
**********

Group: Clan Members
Posts: 2,085
Thank(s): 30
Points: 317
Joined: 3-December 07
Member No.: 50
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


--------------------
Go to the top of the page
 
+Quote Post
MonkeyFiend
post Mar 2 2012, 11:26 AM
Post #3


Security and Projects
**********

Group: Clan Dogsbody
Posts: 4,687
Thank(s): 1098
Points: 2,440
Joined: 31-August 07
From: A Magical Place, with toys in the million, all under one roof
Member No.: 1
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.." tongue.gif

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 tongue.gif

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;
}


--------------------
Go to the top of the page
 
+Quote Post
Qrbrrbl
post Mar 2 2012, 02:50 PM
Post #4


Man at arms
****

Group: Clan Members
Posts: 152
Thank(s): 1
Points: 152
Joined: 28-April 10
Member No.: 4,262
Cheers monkey, i'll give it a whirl later and see how it comes out.


--------------------
Go to the top of the page
 
+Quote Post
Qrbrrbl
post Aug 28 2012, 11:05 AM
Post #5


Man at arms
****

Group: Clan Members
Posts: 152
Thank(s): 1
Points: 152
Joined: 28-April 10
Member No.: 4,262
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?


--------------------
Go to the top of the page
 
+Quote Post
Magik5
post Sep 3 2012, 12:44 PM
Post #6


Paddle Master
**********

Group: Clan Members
Posts: 2,085
Thank(s): 30
Points: 317
Joined: 3-December 07
Member No.: 50
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.


--------------------
Go to the top of the page
 
+Quote Post
MonkeyFiend
post Sep 4 2012, 09:27 AM
Post #7


Security and Projects
**********

Group: Clan Dogsbody
Posts: 4,687
Thank(s): 1098
Points: 2,440
Joined: 31-August 07
From: A Magical Place, with toys in the million, all under one roof
Member No.: 1
good point about the html5 elements... I'd steer well clear of them for now tongue.gif


--------------------
Go to the top of the page
 
+Quote Post
« Next Oldest · PC, Website, Server & Game Support · Next Newest »
 

Reply to this topicStart new topic

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Lo-Fi Version Time is now: 24th November 2024 - 02:13 PM
Sneaky Monkeys Clan :: MonkeyFiend.com