6 replies [Last post]
yetiboy
Offline
Enthusiast
UK
Last seen: 13 years 26 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

Hi guys, I have a navigation problem.

In FF the navigation and paragraph display as expected. As I give the navigation a bottom margin to separate the nav bar from the paragraph.

In IE it places another lines space between the nav and paragraph.

Could anyone enlighten my why is this another IE bug which can be over come or a silly error on my part?

You can view the site at: http://www.timbakeronline.net

Many thanks,

Tim

Tim (yetiboy)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

First, make sure you change

First, make sure you change <div id="nav"> to <ul id="nav"> (and the same for the closing tag and then try this:

#nav { list-style: none; margin: 0 1em 0 0; overflow: hidden; }

#nav li {
padding-left: 22px;
float:left;
text-align:center;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

yetiboy
Offline
Enthusiast
UK
Last seen: 13 years 26 weeks ago
UK
Joined: 2005-09-21
Posts: 88
Points: 0

layout goes haywire in IE

Thanks but... Smile

I did what you suggested I still have a larger space between the nav and paragraph plus the nav is not lined up the same in both browsers. In addtion to this IE has decided to move on of my divs below.

Any more help would be awesome.

Thanks

CSS File:

/* CSS Document */

/* Styling */

body {
text-align:center;
background-color:#333333;
}

/* Global Header, Paragraph, Links, Lists */

h1, p, a {
font-family: Tahoma, Arial, Verdana, sans-serif;
text-align:left;
}

h1
{
font-size:0.8em;
color:#000000;
}

p {
font-size:0.6em;
color: #999999;
}

a {
font-size:0.7em;
color: #999999;
text-decoration:none;
}

/* End of Global Header, Paragraph, Links, Lists */

/* Navigation */

#nav {
list-style: none;
margin: 0 0.5em 0 0;
overflow: hidden;
}

#nav li {
padding-left: 20px;
float:left;
text-align:center;
}

#nav a:link { text-decoration:none; color:#999999}
#nav a:visited { text-decoration:none; color:#999999}
#nav a:active { text-decoration:none; color:#999999}
#nav a:hover { color: #FF6600}

/* */

#left p {
text-align:left;
}

#content a {
font-size:0.9em;
}

#rightfooter a {
font-size:0.9em;
}

#rightfooter li {
font-family:Tahoma, Arial, Verdana, sans-serif;
font-size:0.6em;
display: block;
float: left;
padding-right:10px;
}

#rightfooter a {
font-size:1em;
}

#rightfooter a:link { text-decoration:none; color:#000000}
#rightfooter a:visited { text-decoration:none; color:#000000}
#rightfooter a:active { text-decoration:none; color:#000000}
#rightfooter a:hover { color: #FF6600}

.letterBold {
font-family:Tahoma, Arial, Verdana, sans-serif;
font-weight:bold;
color:#FF6600;
}

.blackBold {
font-weight:bold;
color:#000000;
}

.orangeBold {
font-weight:bold;
color: #FF6600;
}

/* Layout */

#container {
margin:0 auto;
margin-top:20px;
width:740px;
height:369px;
background-color:#FFFFFF;
border:1px #000000 solid;
}

/* Left hand side */

#left
{
float:left;
width:225px;
height:339px;
}

#left p {
padding-left:20px;
}

#leftHeader {
height:50px;
background: url(img/all/logo.jpg) center no-repeat;
padding: 0px;
margin: 0px;
}

#nav {
width:225px;
}

/* Right hand side */

#right {
float:right;
width:510px;
height: 339px;
background: url(img/home/bg_home.jpg) center no-repeat;
}

/* Right hand side contains (content, content footer) */

#content {
height:270px;
padding-top:5px;
padding-left:30px;
padding-right:30px;
}

#contentFooter {
width:490px;
height:50px;
margin-left:2px;
}

body#home #contentFooter h1,p {
text-align: right;
}

/* end of right hand side */

/* Footer */

/* Footer contains left and right footer */

#footer {
clear:both;
display:block;
height:22px;
width:740px;
padding-top: 8px;
margin: 0;
}

#rightfooter
{
float:right;
width:485px;
padding-top:3px;
padding-left:3px;
}

XHTML File:

d e s i g n r e s o l u t i o n


/* backslash hack hides from IEmac \*/
@import url(default.css);
/* end hack */

Hello I'm Julie Gadd. Welcome to my portfolio site. I am a freelance graphic designer and illustrator based in Peterborough, Cambridge*beep*e. Please take the time to view my site and feel free to contact me with any enquiries you may have.

I am a highly creative person and am very competatively priced.

My designresolution is to fulfill the clients brief with no hard sell. I believe that the best solutions come from team work. I will become part of your team working with you to promote, enhance and deliver your designs to the very highest standard.

freelance

graphic design illustration web design

  • A: 4 manton, south bretton, peterbrough, pe39yt
  • T: 0845 257 3948
  • E: [email protected]
  • Tim (yetiboy)

    yetiboy
    Offline
    Enthusiast
    UK
    Last seen: 13 years 26 weeks ago
    UK
    Joined: 2005-09-21
    Posts: 88
    Points: 0

    when i set the margin to be...

    Hey there when I set the margin to:

    margin: 0 0 0 0;

    All returns normal in IE coudl you advise why it does this.

    now I just have a alignment problem and still the exisiting problem of the spacing between the nav and paragraph.

    thanks again

    Tim (yetiboy)

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 6 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    You don't really need to

    You don't really need to post all your code when you've already provided a link.

    Adding padding: 0 to #nav will sort the alignment problem and for #right, remove the float and width and give it a margin-left wider than the width of #left.

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    yetiboy
    Offline
    Enthusiast
    UK
    Last seen: 13 years 26 weeks ago
    UK
    Joined: 2005-09-21
    Posts: 88
    Points: 0

    THANKS

    All great advice there Smile

    Thanks dude.

    (oh i noted the bit about the code beign posted - sorry about that.)

    Tim (yetiboy)

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 36 weeks 1 day ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Just a quick note; you may

    Just a quick note; you may want to get your copy proofread; it's "competitIvely", not sure if there are any other little mistakes Wink

    Verschwindende wrote:
    • CSS doesn't make pies