9 replies [Last post]
c55
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2007-06-28
Posts: 6
Points: 0

I've been trying to figure this out for two days and just can't come to a conclusion of why it will not render properly in IE6. I use browsercam and can view this on pretty much every browser - it looking good in Mozilla and in IE7. I'm trying to figure out if it has something to do with the box model, but I read that that is just for IE5 and below.

What is happening is that the right hand box/graphic is getting pushed up and the left graphic (which turns to content interior) is getting pushed down. Last night I adjusted the width of the content div to accomidate for the larger sapce in ie6 - seemed to work, but now I'm still having the same problem. Please check out:

links removed by request

CSS

body { margin:0; padding:0; background:#6795BF; font-family: Arial, Helvetica, sans-serif; } p { font-size: 85%; line-height: 1.5em; margin: 0 0 1.5em 0; color: #666666;

}


#container {
width: 755px;
\width: 800px;
w\idth: 755px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;

}

#banner {
background: url(../images/header.gif) no-repeat;
padding: 0;
width: 755px;
height: 102px;
margin-bottom: 10px;

}

#nav {
background:#fff url(images/nav.gif);
padding: 8px;
margin-bottom: 10px;
background-color: #fff;
width: 740px;
height: 20px;
}

#nav li {
display: inline;
list-style-type: none;
padding-right: 15px;
border-right: 1px solid #999;
}

#nav a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10px 0px 10px 10px;
font-size: 75%;
color: #072C62;
text-decoration: none;
}

#nav a:hover {
text-decoration: underline;
}


#content {
padding: 15px;
background:#fff;
height:346px;
}

#content p {
background:#fff;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
line-height: 1.8em;

}

#content a:hover {
text-decoration: underline;
}

#content a {
background:#fff;
font-family: Arial, Helvetica, sans-serif;
color: #072C62;
text-decoration: none;
}

#content h1 {
padding: 20px 0px 20px 0;
font-family: Arial, Helvetica, sans-serif;
color: #ff6629;
font-size: 140%;
font-weight: normal;
margin: 1px 0px 0px 1px;
}

#sidebar-a {
float: right;
margin: 15px 15px;
background:#fff url(images/right_bg.gif);
width: 300px;
}

#sidebar-a h1 {
padding: 22px 8px 14px 15px;
font-family: Arial, serif;
color: #fff;
font-size: 1.6em;
font-weight: normal;
line-height: 1.2em;
}

#sidebar-a h3 {
padding: 22px 22px 11px 15px;
font-family: Arial, serif;
font-size: 1.2em;
font-weight: normal;
color: #fff;
}

#footer {
clear: both;
padding: 14px;
margin-top: 10px;
background-color: #fff;

}

#footerlinks {
padding: 15px 10px 8px 10px;
background-color: #FF6629;
font-family: Arial, serif;
font-size: 1.0em;
color: #fff;
}



#footer3 p {
font-size: 84%;
font-family: Georgia, serif;
text-align: center;
color: #fff;
padding: 10px ;
}

#footer3 a {
font-size: 100%;
font-family: Georgia, serif;
text-align: center;
color: #fff;
}

ol a {
font-family: Arial, Helvetica, sans-serif;
font-weight: none;
color: #fff;
font-size: 12px;
text-decoration: none;
}

ol a:hover {
text-decoration: underline;
}

/* allow room for 4 columns */
ol
{
width: 40em;
list-style-type: none;

}

/* float & allow room for the widest item */
ol li
{
float: left;
width: 10em;
list-style-type: none;

}

/* stop the float */
br
{
clear: left;
}

/* separate the list from subsequent markup */
div.wrapper
{
margin-bottom: 1em;
}

HTML

title




 art

  • HOME
  • ABOUT THE WALK
  • MAP OF THE WALK
  • CONTACT US
  • Every Saturday Night June 30th-September 1 5:00-8:00 PM

    Experience the diverse Art Galleries of Dennis Village during the Saturday Night Art Walks. Meet the artists, hear live music and enjoy refreshments.

    robert k roark painting


    1. Grose Gallery

    2. Boat Meadow Gallery

    3. Winstanley-Roark Fine Arts

    4. Baksa Studio

    5. The Decorative Painter

    6. Mill Stone Pottery

    7. Harvest Gallery Wine Bar

    8. Jerome Greene Fine Art

    9. Wilson Gallery

    10. Scargo Pottery & Art Gallery

    11. Ross Coppelman

    12. Cape Cod Museum of Art

    13. Cape Cinema

    14. Cape Playhouse











    © | Site Designed & Developed with Web Standards







    Thanks for any help on this, I'd really appreciate it as I am helping these artists out.

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 7 years 16 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    try placing the sidebar-a

    try placing the sidebar-a div inside the content div and removing the right padding from the sidebar.

    c55
    Offline
    newbie
    Last seen: 13 years 51 weeks ago
    Joined: 2007-06-28
    Posts: 6
    Points: 0

    Thanks for the post - that

    Thanks for the post - that seemed to have solved the problem of stacking up top, but now the sidebar is below. Is there something to do with the margins or padding that is knocking it down?

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 7 years 16 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    either place the sidebar

    either place the sidebar before the image in the source code, or float the image left.

    c55
    Offline
    newbie
    Last seen: 13 years 51 weeks ago
    Joined: 2007-06-28
    Posts: 6
    Points: 0

    Great thanks - I'll just

    Great thanks - I'll just have to work on the padding and margins to get the correct length.

    Can you explain why this happened so next time I don't fall in to this? The sidebar should have been contained in the content div?

    thanks for the help....

    wolfcry911
    wolfcry911's picture
    Offline
    Guru
    MA, USA
    Last seen: 7 years 16 weeks ago
    MA, USA
    Timezone: GMT-5
    Joined: 2004-09-01
    Posts: 3224
    Points: 237

    floats are taken out of the

    floats are taken out of the normal document flow and are allowed to 'hang' over the following block level elements displacing only the inline content. This behavior is what allowed it to work in FF, but IE will not allow the float to do that. It needed to be inside the content div. Then, once inside the image came first and then the float so either the image needed floating itself or the sidebar needed to precede the image.

    c55
    Offline
    newbie
    Last seen: 13 years 51 weeks ago
    Joined: 2007-06-28
    Posts: 6
    Points: 0

    Grea thanks wolfcry911,

    Grea thanks wolfcry911, you've been of great help...have a good day.

    c55
    Offline
    newbie
    Last seen: 13 years 51 weeks ago
    Joined: 2007-06-28
    Posts: 6
    Points: 0

    Actually, I was just doing

    Actually, I was jsut doing the final testing on all browsers and these internal pages are having the same alignment problem in ie6 XP, but not in other OS:

    link removed

    Could it be a padding issue?

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 16 weeks 1 day ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Before looking at anything

    Before looking at anything else, you've forgot to open the nav ul. That could cause any number of anomalies.

    A trip to the validator is always in order before attempting any debugging.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    c55
    Offline
    newbie
    Last seen: 13 years 51 weeks ago
    Joined: 2007-06-28
    Posts: 6
    Points: 0

    Thanks Gary - I'm actually

    Thanks Gary - I'm actually having issues with the nav in ie6 - I'll validate the site now, I did before I posted and didn't see anything but color issues. The nav in ie6 has height problems.

    I'm all set, thanks for the help and your can closed this as it is resolved.