6 replies [Last post]
gdarends
Offline
Regular
Last seen: 14 years 31 weeks ago
Timezone: GMT+1
Joined: 2007-03-13
Posts: 14
Points: 0

Hello,
I've been trying to make some kind of hack for IE6 and below but I was not successful.
I made some space available to put in a swf file which would become the menu. I assign the width of the swf and it looks perfect in all browsers except IE6 and below. In IE6 and below it forces the swf down because the size doesn't fit.

HTML:

Home

Lbanner
Rbanner
  • Link5
  • Link3
  • Contact

Lorem ipsum dolor sit amet, nonummy tortor, nec quis nisi venenatis dui sollicitudin, etiam quas, eu tristique justo. Turpis quis eu mi dui tortor ac, lobortis vestibulum rhoncus libero quam interdum, proin nunc massa. In aliquam in, a in lacus leo, risus magna urna porttitor. Morbi sit est praesent tempor pellentesque eleifend, laoreet posuere. Tincidunt ante. Wisi ipsum id, sapien lectus, nunc nulla pellentesque. A elit diam erat commodo mattis, wisi ut quam proin donec sapien nisl, vel luctus morbi maecenas, eum adipiscing nunc pellentesque. Leo morbi est vel scelerisque in tortor.


CSS:

body {
margin: 0px;
font-family: "Times New Roman", Times, serif;
}

#container {
width:850px;
margin-top: .5em;
margin-left: .5em;
background: #0066CC url(gfx/bg-base.gif) repeat-x;
line-height:120%;
}

#main {
background-color:#FFF;
margin:0 50px;
padding:0 .05em;
}

#header {
background-color:#1D4C9F;
padding:.5em 0;
margin-bottom:.05em;
}

#lb-container { float:left; }
#l-banner, #l-nav { border-right:#FFF .05em solid; }
#l-banner { }
#l-nav { background-color:#CCC; text-align: left; }

#rb-container { float:right; }
#r-banner, #r-nav { border-left:#FFF .05em solid; }
#r-banner { }
#r-nav { background-color:#CCC; text-align: right; }

#l-nav, #r-nav {
padding:0;
font-size: 70%;
}

#l-nav a, #r-nav a {
padding: .25em .6em; /* t/r/b/l */
color: #666;
text-decoration: none;
background-color:#FFF;
}

#l-banner, #r-banner { padding:7px; }
#l-nav ul, #r-nav ul { padding:0; margin:0; }
#l-nav li, #r-nav li { list-style: none; display: inline; }

#menu { background-color:#CCC; }

#menu-border { clear:both; background:#666 url(gfx/brd-menu.gif); border-top:#FFF .05em solid; }
#menu-border-l, #menu-border-r { padding:0 7px; }
#menu-border-l { float:left; border-right:#FFF .05em solid; }
#menu-border-r { float:right; border-left:#FFF .05em solid; }

#content {}
#footer {
clear:both;
background:#666 url(gfx/brd-footer.gif) repeat-x;
border-top:#FFF .05em solid;
height:25px;
font-family:"Courier New", Courier, monospace;
font-size:.7em;
color:#FFF;
margin-top:1em;
line-height:100%;
}

I'm not sure if it's even possible to fix this issue, but if it is.. please help me out.

tnx

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

We could do with looking at

We could do with looking at this via a url

gdarends
Offline
Regular
Last seen: 14 years 31 weeks ago
Timezone: GMT+1
Joined: 2007-03-13
Posts: 14
Points: 0

Ok.. It's on the following

Ok.. It's on the following url:
http://home2.telebyte.nl/~gdarends/tmp/

btw: The swf menu is currently just a white background swf. I havn't gotten there yet. Its just there now as a placeholder.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK A number of ideas (as I

OK

A number of ideas (as I only have IE6 at work, where I won't be able to look at it for a few hours).

The border on the swf is in ems. IE isn't too good at converting ems to px. I am not sure why you have this at all. I tend to avoid putting padding or borders on things with height or width in the direction that I want padding or border to keep IE5.x happy.

Change the code for the side menus:

#lb-container { float: left; display:inline;width:185px;} #rb-container { float: right;display:inline;width:185px;}

If that doesn't work, try adding this:

* html #menu (margin-left:-3px;}

Let me know if you have fixed it with these ideas.

Trevor

gdarends
Offline
Regular
Last seen: 14 years 31 weeks ago
Timezone: GMT+1
Joined: 2007-03-13
Posts: 14
Points: 0

ClevaTreva wrote:OK

ClevaTreva wrote:
OK

A number of ideas (as I only have IE6 at work, where I won't be able to look at it for a few hours).

The border on the swf is in ems. IE isn't too good at converting ems to px. I am not sure why you have this at all. I tend to avoid putting padding or borders on things with height or width in the direction that I want padding or border to keep IE5.x happy.

Change the code for the side menus:

#lb-container { float: left; display:inline;width:185px;} #rb-container { float: right;display:inline;width:185px;}

If that doesn't work, try adding this:

* html #menu (margin-left:-3px;}

Let me know if you have fixed it with these ideas.

Trevor

Ok I tried these.. but no luck.
I changed the width of the swf.. as you can see now, it fits but now there is some space on both sides of the swf. I had to decrease the width from 378px to 370px to fit. But now in all browsers you can see the space on each side of the swf.
If you check the url now u will see the difference.
I also added a jpg image so that you can see the difference:
http://home2.telebyte.nl/~gdarends/tmp/page.jpg

Also, I changed all the paddings and margins to px instead of ems.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Try adding float:left to

Hi

Try adding float:left to #menu

gdarends
Offline
Regular
Last seen: 14 years 31 weeks ago
Timezone: GMT+1
Joined: 2007-03-13
Posts: 14
Points: 0

ClevaTreva wrote:Hi Try

ClevaTreva wrote:
Hi

Try adding float:left to #menu

Yes... that did the trick!!!

Thanks A LOT!!