Hi All

 

Am still 'fairly' new to all of this. I like to think my skills are at an intermediate stage, and am busy learning advanced techniques as and when I can (as per my my introductory post)

 

I am currently re-designing my cricket clubs website that I play for, and wondered on your thoughts on the 1st draft ! ....

 

1st Draft

 

Also, it looks ok in all the latest browsers but in compatability view (i.e IE6/7 NAV bar and IMGs look shocking) ... how do you guys tackle the IE nightmares ... and how long do you think will need to continue using various 'hacks' for (i.e when will IE8+ be the norm ??!!)

 

Thanks!

Steve

Hi Steve!

 

Your site looks good. I'm not sure I would have designed the nav quite like that but we all do things differently.

 

One fundamental, you may or may not know, is that png and ie6 really don't mix well.

 

I've tweaked your css below and this should get your nav to display correctly in IE6,7 and other decent browsers!

 

 

Cross browser issues are something you just need to live with but as you work more and more on sites you'll start to find you encounter these issues less and less. Mainly because you'll get out of any bad coding practices.

 

To fix your issue I've changed your nav links into block level elements and floated them. Turning them into blocks allows you to set a height on the nav links and that fixes the IE issues.

 

Try out the css and let me know if you have any other probs.

 

Jebediah

 

 

@charset "utf-8";

body {

font: 100%;

background: url(cricket6.jpg);

margin: 0; /* it's good practice to zero the margin and padding of the body element to account for

 

differing browser defaults */

padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned

 

default in the #container selector */

color: #000000;

font-family: Arial, Helvetica, sans-serif;

text-align: center;

}

.oneColFixCtrHdr #container {

width: 871px; /* using 20px less than a full 800px width allows for browser chrome and avoids a

 

horizontal scroll bar */

background: #FFFFFF;

margin: 0 auto;

text-align: left; /* this overrides the text-align: center on the body element. */

border-left: 2px solid #000000;

border-right: 2px solid #000000;

border-top: 2px solid #000000;

}

 

h1 {

background-image: url(nav2.png);

height: 18px;

color: #FFFFFF;

width: 852px;

margin-left: -20px;

margin-top: 10px;

padding-left: 20px;

padding-bottom: 5px;

line-height: 1em;

}

h2 {

background-image: url(banner1.png);

height: 18px;

color: #FFFFFF;

width: 857px;

margin-left: -20px;

margin-top: 40px;

padding-left: 5px;

padding-bottom: 5px;

line-height: 2em;

}

 

p {

font-size: 12px;

margin-right: -15px;

 

}

#navbar {

font-size: 12px;

background-image: url(http://www.gopherdesign.co.uk/clients/PeperHarow/nav1.png'>http://www.gopherdesign.co.uk/clients/PeperHarow/nav1.png);

 

text-align: center;

height: 34px;

padding-top: 1px;

-width: 900px;

 

}

 

 

 

 

 

 

#navbar ul {

margin: 0;

overflow: hidden;

list-style-type: none;

padding: 0px 0px;

}

 

#navbar li {

float: left;

}

#navbar a, a:link {

text-decoration: none;

color: #fff;

padding: 11px 52px 11px 52px;

display: block;

float: left;

height: 12px;

margin-left: 0px;margin-top: 0px;

background-image: url(http://www.gopherdesign.co.uk/clients/PeperHarow/nav2.png);

background-position: left center;

border: 1px gray solid;

font-weight: normal;

 

}

#navbar a:hover, a:visited {

text-decoration: none;

background-image: url(http://www.gopherdesign.co.uk/clients/PeperHarow/nav1.png);

}

#link a, a:link {

border: none;

clear: both;

margin: 0;

padding: 0;

color: #003300;

background: none;

font-weight: bold;

}

 

#link a:hover, a:visited {

color: #000000;

border: none;

clear: both;

margin: 0;

padding: 0;

text-decoration: underline;

}

 

 

.float_right {

float: right;

}

.oneColFixCtrHdr #header {

background-image: url(http://www.gopherdesign.co.uk/clients/PeperHarow/logo4.png);

background-repeat: no-repeat;

background-position: center left;

border-right: 10px solid white;

height: 118px;

margin-top: 2px;

 

}

.right {

float: right;

margin-top: 3px;

z-index: -4;

margin-right: 5px;

}

 

 

 

.oneColFixCtrHdr #header h1 {

margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an

 

unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the

 

margin collapse */

padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges

 

of the div */

}

.oneColFixCtrHdr #mainContent {

padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside

 

the div box */

background: #FFFFFF;

width: 550px;

float: left;

font-size: 11px;

clear: both;

}

.oneColFixCtrHdr #mainContent h1 {

padding-top: 8px;

font-size: 1.5em;

 

}

 

#rightmenu {

float: left;

width: 275px;

text-align: center;

margin-left: 6px;

}

#rightmenu img {

margin-top: 5px;

padding: 1px;

z-index: 3;

background-color: #333333;

 

 

}

#rightmenu p {

margin-top: -10px;

}

 

 

 

 

.oneColFixCtrHdr #footer {

padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above

 

it. */

background:url(nav1.png);

clear: both;

color: #FFFFFF;

text-align: center;

}

.oneColFixCtrHdr #footer p {

margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin

 

collapse - a space between divs */

padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without

 

the margin collapse issue */

}

.oneColFixCtrHdr #footer a:link {

text-decoration: underline;

color: #000;

margin: 0;

padding: 0;

 

}

 

.float_left {

float: left;

padding: 10px 10px 10px 25px;

}

 

.style1 {

font-size: 10px

}

.style2 {font-size: 12px}

Nice draft man! I think the design looks pretty good

Cheers Jebediah, i'll have a go with that tomorrow!

 

Steve

worked a treat jebediah ... plus have moved the nav bar again and re-styled .. still a work in progress but looking better i think ...

 

http://www.gopherdesign.co.uk/clients/PeperHarow/home.html

Much better I think now, but would welcome everyone's thoughts? .. My Site

 

Also not sure what colour to do main background in ... the gray works ok .. i think .. just ?????

the gray works great

 

nice draft