Browser spesifik css

[Aisutora]

Skulle gjerne hatt to forskjellige css'er til siden min. IE blir ikke slik jeg vil den skal bli. Og jeg aner ikke noen annen løsning enn dette og jeg lurer på om det går an å ha en css til IE og en til FireFox/Opera uten og bruke php på siden, for jeg fikk et tips om det her litt tidligere.

[halvardm]

Vet ikke helt det, men du kan gjøre det enklere.

Det kan du gjøre ved å bruke !important i stilarket ditt.

 

margin-left: 200px !important;
margin-left: 100px;

 

IE har en feil som gjør at den dobler marginen og er fungerer !imortant ypperlig til å fikse det.

IE "hopper" over alle kode der det står !important, mens FF og Opera mener at den er den viktigste.

 

Vet ikke helt om dette kunne hjelpe deg, men jeg må nevne at !important kan brukest til alt. (Tror jeg).

Slå meg om jeg tar feil.

Endret 3. februar 2005 av Skomaker

[Aisutora]

Joda, jeg tror det var til stor hjelp hvis det funker. Skal prøve det med en gang.

 

Tusen takk!

 

*EDIT*

 

Prøvde nå nettopp, og det skjedde ikke noe, prøvde å bruke "!important" på et av bakgrunnsbildene som IE ikke klarer å sette der jeg vil ha det, så eneste løsningen jeg ser er å fjerne den hvis det ikke skal se helt dumt ut i IE, eller så kan jeg jo eventuelt bare gjøre slik at siden ikke funker i IE, men det vil jeg jo helst unngå.

Endret 3. februar 2005 av Aisutora

[halvardm]

Kan jeg få se på koden?

[Aisutora]

Jeg lastet den aldri opp. Men den ser slik ut:

 

* { margin:0;
padding:0;
border:0;
}
body,td,th {
font-family: Trebuchet MS, Arial, sans-serif;
color: #666666;
font-size: 12px;
text-align:left;
*/PROBLEM*/background:url(./images/bg.gif) center repeat-y gray;*/PROBLEM*/
}

a:link {
color:#006699;
}
a:visited {
color: white;
}
a:hover {
text-decoration:overline underline;
}
/***********/
/* Layout */
/*********/
#div {
background:url(./images/topbg.GIF) repeat-x;
}

#frame {
width:768px;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
background:url(./images/contentbox.gif) repeat-y;
}

#header {
width:768px;
height:177px;
padding:0px;
background:#E1E1E1 url(./images/header.png) no-repeat;
}

#menu {
width:768px;
height:58px;
background:url(./images/menu2.gif) no-repeat;
}

ul#hovedmeny {
list-style:none;
float: left;
width: 100%;
padding-left:8px;
}

ul#hovedmeny li{ 
display:inline;
}

ul#hovedmeny li a {
 	text-decoration: none;
 	float: left;
}

#content {
width:571px; /* widthpx - padding = px */
padding-left: 14px;
float:left;
padding-top: 11px;
}

#rightmenu {
padding:0px 20px 12px 12px;
float:right;
font-size: 12px;
text-align:left;
width: 138px;
}

#footer {
width:768px;
height:48px;
background:url(./images/footer.gif) bottom no-repeat;
clear:both;
}
.list {
padding-left:20px;
}
.listnone {
padding-left:14px;
list-style:none;
}

.contentimage {
border:10px #999999 solid;
margin-left:15px;
}

 

Har markert problemet med en comment For i IE vil ikke den bakgrunnen stille seg likt med resten av innholdet.

Du kan jo sjekke www knappen selv i IE, så ser du hva problemet er. Det skal alltid være så mye problemer med IE. Det irriterer meg, men det er jeg nok ikke alene om.

Endret 3. februar 2005 av Aisutora

[halvardm]

Det røde?

Jeg ser ikke noe rødt noen plass jeg?

[Aisutora]

Måtte endre det til en */PROBLEM*/ comment for det funket ikke å bruke farger og slikt inni en kode.

 

*EDIT*

 

Jeg klarte å fikse siden min slik at den virker likt i alle browserene nå. Var egentlig ganske logisk det jeg måtte legge til å css'en. Måtte sett overflow til hidden i hoved div'en for å få bakgrunnen der den skulle. Og for at IE skulle forstå at jeg brukte marginborder så måtte jeg spesifisere at den skulle være 2px tykk. Så nå er alt i boks.

 

Men det kunne likevel være interessant å vite hvordan man kan bruke flere ulike css'er til ulike browsere likevel. All kunnskap er nyttig.

Endret 3. februar 2005 av Aisutora