17 replies [Last post]
Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

Hi.

I have a problem that is driving me crazy right now.
I'm about to transform my company's website from frames to Css. I've managed quite good so far, but then when i looked at the site in IE6 I saw something strange. My menu is being "swalloed up" by one of my containers.

http://www.arbetskladshuset.se/lindacss/sidfel.jpg

The picture on the left is how it's supposed to look and the image to the right is the outcome from IE6. The red part is the wrapper, the text area is the wrappercontent (where I have another cantainer called "content") and the meny is the menycontainer.

In my Css I have a wrapper, inside the wrapper is a wrappercontainer and a menycontainer. I've tried some hacks but it just doesen't seem to work. I've tried to move the menycontainer outside the wrappercontainer, but tha result I got then was that the menycontainer placed it self under the wrappercontainer. So I got the same problem but reversed effect.

Here's my htmlcode:




Arbetsklädshuset- Din sida för arbetskläder, skor och skydd




Tillbaka till förstasidan













Välkommen till arbetsklädshusets Internetbutik


And here's my Css:

#wrapper { background-color: #990000; margin: -10px auto; text-align: left; width: 100em; }

/*innehåll hemsida */
/* Top */
#top
{
margin-top: 1px;
background: url(../img/topny.gif) left top no-repeat;
width: 790px;
clear:both;
height: 49px;
}

#top a
{
position: absolute;
height: 38px;
width: 280px;
top: 7px;
text-decoration: none;
}
#top a i
{
visibility: hidden;
}
a#home
{
height: 38px;
width: 280px;
left: 150px;
top: 10px;
position: absolute;
visibility: visible;
}

#toplinks
{
text-align:right;
vertical-align: bottom;
color:#029DE0;
font-weight:700;
padding-top:30px;

}
/* slut top */

/* Content */

#wrappercontent
{
width: 790px;
height: 450px;
background: #ffffff;
border: 1px #000000 solid;
float:left;
display: inline;
margin:0;
margin-left: 40px;
}
/* slut content */

/* meny */

h1 {font: 1em Verdana, Arial, Helvetica, sans-serif;color: #CCCCCC;}

#menycontainer
{
margin-left: -40px;
margin-top: 15px;
font-size: 1em;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #ffffff;
width: 13em;
height: 42em;
float:left;
display: inline;
}

Does someone know why this is happening? I've tried moving things around, but it just doesent work. Right now I wish I could use z-index, but I want to stay away from position: absolute. Exept for this problem the site works great in both Firefox, IE7 and IE6 without any hacks except the display: inline hack.

/Linda

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

Can you provide ALL the HTML

Can you provide ALL the HTML and not as it is in your template with includes, but as it appears in the browser?

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

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

Sorry, you mean the link to the page?

Here's the adress to the page:
http://www.arbetskladshuset.se/lindacss/testsida.asp

<%response.buffer = false%>




Arbetsklädshuset- Din sida för arbetskläder, skor och skydd




Tillbaka till förstasidan










  • Byxor
    <%
    If Request.QueryString("huvudkategori") = "byxor" Then
    %>

    • •Servicebyxor
    • •Hantverkarbyxor
    • •Hängselbyxor
    • •Vinterbyxor

    <%
    End If
    %>
  • Tröjor
    <%
    If Request.QueryString("huvudkategori") = "tröja" Then
    %>

    • • Tröjor
    • • Skjortor
    • • T-tröjor

    <%
    End If
    %>
  • Overaller
    <%
    If Request.QueryString("huvudkategori") = "overall" Then
    %>

    • • Overaller
    • • Vinteroveraller

    <%
    End If
    %>
  • Jackor
    <%
    If Request.QueryString("huvudkategori") = "jackor" Then
    %>

    • • Jackor
    • • Vinterjackor

    <%
    End If
    %>
  • Västar
    <%
    If Request.QueryString("huvudkategori") = "väst" Then
    %>

    • • Västar
    • • Fodrade Västar

    <%
    End If
    %>
  • Varselkläder
    <%
    If Request.QueryString("huvudkategori") = "varsel" Then
    %>

    • • Varselbyxor
    • • Varseljackor
    • • Varselvästar
    • • Varseloveraller

    <%
    End If
    %>
  • Regnkläder
    <%
    If Request.QueryString("huvudkategori") = "regn" Then
    %>

    • • Regnkläder

    <%
    End If
    %>
  • Personligt skydd
    <%
    If Request.QueryString("huvudkategori") = "skydd" Then
    %>

    • • Knäskydd
    • • Hörselskydd
    • • Andningsskydd
    • • Huvudskydd
    • • Första Hjälpen
    • • Övrigt

    <%
    End If
    %>
  • Skor
    <%
    If Request.QueryString("huvudkategori") = "skor" Then
    %>

    • • Skyddsskor
    • • Kängor
    • • Stövlar
    • • Arbetsskor
    • • Sandaler

    <%
    End If
    %>
  • Handskar
    <%
    If Request.QueryString("huvudkategori") = "hand" Then
    %>

    • • Handskar

    <%
    End If
    %>
  • Kök/Restaurant
    <%
    If Request.QueryString("huvudkategori") = "kök" Then
    %>

    • • Kök/Restaurant

    <%
    End If
    %>
  • Vård/Städ
    <%
    If Request.QueryString("huvudkategori") = "vård" Then
    %>

    • • Vård/städ

    <%
    End If
    %>
  • Barn
    <%
    If Request.QueryString("huvudkategori") = "barn" Then
    %>

    • • Barnkläder

    <%
    End If
    %>
  • Dam
    <%
    If Request.QueryString("huvudkategori") = "dam" Then
    %>

    • • Damkläder

    <%
    End If
    %>
  • Tillbehör
    <%
    If Request.QueryString("huvudkategori") = "tillbeh" Then
    %>

    • • Verktygsfickor
    • • Hängslen/Bälten
    • • Strumpor
    • • Underkläder
    • • Mössor/Kepsar
      <%
      End If
      %>
    • Presentreklam
      <%
      If Request.QueryString("huvudkategori") = "profil" Then
      %>

      • • Presentreklam
      • • Profilkläder
      • • Profilartiklar

      <%
      End If
      %>



    • Kampanjer
    • Mina favoriter


    • Mitt företags kläder



    • Köpinformation
    • Logga ut





Välkommen till arbetsklädshusets Internetbutik

Hos oss finner du ett stort urval av arbetskläder både för privat bruk eller för dig som företag. Vi har kläder från alla stora märken så som Skydda, Fristads, Jobman. Vi har även lite tuffare kläder från tex L'Brador, Mascot och Dunderdon. Vi har arbetsskor från Arbesko, Sivie och Båstads. Här finner du skyddskor och arbetsskor. Vi har även andra märken så som Crocs och Auda.

Är du i restaurantbranchen? Vi har kläderna för dig. Kolla in vårt sortiment av kock- och servitriskläder. Vi har även kläder för dig som jobbar inom vård och städ.




Arbetsklädshuset




Här lägger du högergrejjerna















Sorry. Smile

/Linda

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 7 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Hello Linda, Can I just ask

Hello Linda,

Can I just ask what this does?

<%response.buffer = false%>

I'm pretty sure there's a browser that gets all funny and complains when there's something before the DOCTYPE. It may even be IE6 but don't quote me on that.

Anyway, that was just an initial thought, the others know more then me Smile

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

Not sure, but it needs to be there...

As I'm a lowly webdesigner and not a programmingexpert, I can honestly tell you I'm not sure. Wink
I think it turns off and on the buffering to the database. Since this is a webshop the programming is done in ASP (not done by me) and that code is somehow connected to the database and my shoppingbasket. I've tried to figure out if I need it or not, but I don't think it'll interfere with the html since it's asp. It hasn't before or on the other pages so I just leave it be for now.

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

You need to validate your

You need to validate your page. There's three doctypes in there!

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

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

I Don't understand...

Do you mean in the entire website? Or in the code above?

I've been trying to figure out which doctype work out the best. It's kind of a jungel to know which one to use, but now I think I know. But I haven't understood the difference between the xhtml one and the html one yet. So thats why there's more than one at the time in my site. But I'l fix that later. Right now I'm stuck with this IE6 problem. I just can't seem to work on anything else until I get this resolved.

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

Hi Linda, Welcome to

Hi Linda,

Welcome to CSSCreator.

It is important that errors be fixed as soon as possible. Browsers are very fault tolerant, but errors can cause the browser to become confused, and that confusion can propagate through the rest of the document. Too, different browsers may handle a given error differently, causing x-browser issues. (which you are experiencing, no?)

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.

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

IE has problems--who would of guessed

IE has problems with negative margins that pull an element out of its container.

Not tested.

The usual fix is to make the element, #menycontainer {position: relative;}. You may also need to make its parent #wrappercontent relative. Don't do it if not required. Position relative fixes a lot of bugs in IE, but it also causes a lot of bugs. So, use it sparingly.

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.

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

Windwill wrote:But I'l fix

Windwill wrote:
But I'l fix that later. Right now I'm stuck with this IE6 problem.

Sorry, but forum rules dictate that all pages must validate before you ask for help. And there's a reason: there's no point trying to patch CSS when it applies to dodgy HTML.

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

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

Sorry...

:bigoops:
I've must have missed that. I'm not new to webdesign, but this whole validation thing is kind of new to me. I've now updatede the site with the same doctype, but w3C still doesent consider it validated. Seems like it doesn't like my include files, but I need doctypes in them to because otherwise the code doesn't work at all in IE.

kk5st: That's what i was afraid of (and the most probable cause for the problem). Sad Is it possible to fix that with an alternative css? I've seen that you can us a "if IE6 then use this stylesheet instead thing". Would that work or is it not proper to do so. I really like not to, but I rather do two stylesheets than use position in the original css, since I know it will mess things up.

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

YES!

Just had to tell you that I solved it. Laughing out loud And so easy and elegant to... Wink
No need to hassle with extra stylesheet. I just added _position:relativ and _z-index and voila... no more problem. Laughing out loud I'm so happy I think I will do a little victory dance when no one here sees me... Wink

/Linda

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

Windwill wrote:Seems like it

Windwill wrote:
Seems like it doesn't like my include files, but I need doctypes in them to because otherwise the code doesn't work at all in IE.

Then you've got something seriously wrong going on then. There should only be one doctype per page. Includes shouldn't be complete new pages; they should just be fragments of code.

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

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

I'm sooo stupid...

Of course... That's why I've been having troubles with my I've been thinking in terms of frames looking at includes the same way. So I really don't need the doctypes in the include files... I's treated like the content is on the same page always, right...?

I'm going to slap my self around a bit now... or go hide somewhere dark and murky... Wink

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

Windwill wrote:So I really

Windwill wrote:
So I really don't need the doctypes in the include files.

No. Includes aren't complete pages, they're more like parts of a jigsaw puzzle - individually they don't look like much but when put together with other pieces, they make a meaningful whole.

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

Windwill
Offline
newbie
Uppsala. Sweden
Last seen: 15 years 32 weeks ago
Uppsala. Sweden
Joined: 2007-06-27
Posts: 8
Points: 0

Another doctype question...

It's seem w3c wasn't so thrilled about font class="" tags. If I want to change the style on a particular word what should I use instead? style class?

Alot of this stuff is still hanging on because I've just taken the code from the framesite and redone it into Css instead.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Windwill wrote:It's seem w3c

Windwill wrote:
It's seem w3c wasn't so thrilled about font class="" tags. If I want to change the style on a particular word what should I use instead? style class?

Depends on why you are changing the style. Is it to make it stand out, or emphasize it? If so, wrap in in an EM element, or STRONG if you wish to strongly emphasize the word. If you don't like the way browsers default styles render these, give the EM or STRONG a class and style it to look as you want it to in the stylesheet.

There are other tags that might be appropriate for other contexts. HTML should reflect the meaning of the content and ideally should be presentation neutral.

So tell us just why you want to have a different style on the text and we can give you a firmer answer.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

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

Windwill wrote:Just had to

Windwill wrote:
Just had to tell you that I solved it. Laughing out loud And so easy and elegant to... Wink
No need to hassle with extra stylesheet. I just added _position:relativ and _z-index and voila... no more problem. Laughing out loud I'm so happy I think I will do a little victory dance when no one here sees me... Wink

/Linda
There is no need to hide either the position or the z-index property from modern browsers. Simply add the properties to the selector's ruleset. Neither does any harm (except for the caveat against using relative positioning willy-nilly due to IE bugginess), and if IE ever decides to fix the underscore bug but not the negative margin bug, you're screwed.

A good example is the Holly Hack, used to trigger hasLayout in IE<=6, doesn't work in IE7 because the * html bug was fixed.

cheers,

gary

ps. All dances for joy should be done in full view of the multitudes. --g

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