Gå til innhold

Problemer med design i Firefox

vimael

Anbefalte innlegg

vimael

vimael

Skrevet
Skrevet

Hei

 

Jeg holder på med en webside hvor designet er bygd opp med hjelp av CSS.

 

I IE blir det riktig, men i FF skjer det underlige ting.

 

Se gjerne på siden i begge leserne for å se det med egne øyne:

http://www.multiinvest.no/new2/artikkel.ph...;artikkel_id=61

 

En annen finurlig greie dukker opp når du trykker på bildet av bilen.

Da kommer det opp en lightbox som blir riktg i FF, men ikke i IE.

 

Kan noen av dere gi meg ett hint på veien?

Er det kanskje så enkelt at man bare kan legge inn en eller annen FF-fix i html-koden?

 

 

CSS til siden:

/* STANDARD TAG REDEFINITIONS */
BODY{ color: White; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; background-color: Black; margin: 0; padding: 0; }
TD {font-size: 10pt;  }
p { font-size: 10pt;  margin-bottom: 7px; margin-top: 0; }
a{ color: #76DEFC; text-decoration: none; }
a:hover{	text-decoration: underline;  color: White;   }
form{	margin:0;}

#HEADER{	width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #444444; }
#HEADER { margin: 0; padding-left: 0; height: 34px; line-height: 34px; display: block; list-style: none; background-color: #000000; }
#HEADER { display: inline; float: left; }
#HEADER a{ height: 34px; line-height: 34px; display: block; padding-left: 10px; padding-right: 10px; border-left: 3px solid Black; float: right; font-weight: bold; background-color: #222222; background-image: url(images/image4.gif); background-repeat: no-repeat; background-position: bottom left; }
#HEADER a:hover{ background-color: #444444; background-image: url(images/image5.gif); background-repeat: no-repeat; background-position: bottom left; text-decoration: none; font-weight: bold}
#HEADER .current{ background-color: #444444; display: block; background-position: bottom left; padding-left: 10px; padding-right: 10px; border-left: 3px solid Black;  float: right; text-decoration: none; font-weight: bold; color: white}
#HEADER .Visual{ height:150px; background-image: url(images/image3.jpg);  background-repeat: no-repeat;  background-color: #4492C8;  border-bottom: 0px solid Black; border-top: 3px solid Black;  }
h1{ margin: 0; padding: 40px 0 0 0; font-family: "trebuchet ms",arial,tahoma,verdana,sans-serif; font-weight: normal; letter-spacing: .005em; color: White;  font-size: 20pt;  }

#HEADER2{	width:800px; margin-left:auto; margin-right:auto; }
#HEADER2 { margin: 0; padding-left: 0; height: 34px; line-height: 34px; display: block; list-style: none; border-top: 30px solid Black; background-color: #000000;  }
#HEADER2 { display: inline; float: left; background-image: url(images/image4.gif); background-repeat: no-repeat; }
#HEADER2 a{ display: block; padding-left: 20px; padding-right: 20px; border-right: 3px solid Black; float: left; font-weight: bold; background-color: #222222; background-image: url(images/image44.gif); background-repeat: no-repeat; background-position: top right; }
#HEADER2 a:hover{ background-color: #444444; background-image: url(images/image55.gif); background-repeat: no-repeat; background-position: top right; text-decoration: none; font-weight: bold}
#HEADER2 .current{ background-color: #444444; display: block; padding-left: 20px; padding-right: 20px; float: left; background-image: url(images/image55.gif); background-repeat: no-repeat; background-position: top right; text-decoration: none; font-weight: bold; color: white}

#CONTENT{	   width:800px; margin-left:auto; margin-right:auto;  }
#H2{ margin-right: 600px; padding: 17px 0px 7px 30px; font-family: "trebuchet ms",arial,tahoma,verdana,sans-serif; font-weight: normal; letter-spacing: .005em; color: White; font-size: 15pt;  background-color: #444444; display: block; border-top: 15px solid Black; }

#TEXT{	width:800px; margin-left:auto; margin-right:auto; }
#TEXT{ padding: 35px 40px 35px 40px; border-bottom: 1px solid #484848; border-top: 1px solid #484848; background-color: #222222; }
#TEXT p{	margin-bottom: 1em;}

#FOOTER{	width:800px; margin-top:27px; margin-left:auto; margin-right:auto;  border-top: 4px solid #363636;  text-align: right;  padding-top: 5px;   }
#FOOTER p{ font-size: 11px; line-height: 14px; margin: 0;  color: #DDDDDD; }
#FOOTER a{ font-size: 11px;	font-weight: normal;	text-decoration: none;  color: White;	}
#FOOTER a:hover{ color: white; text-decoration: underline; }

.heading { color: white; font-size: 20px; font-family: tahoma, "times new roman"; font-weight: normal; line-height: 30px; }

 

CSS til lightbox:

/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev { 
left: 0; 
float: left;
}
#lightbox-nav-btnNext { 
right: 0; 
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px; 
color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
width: 70%; 
float: left; 
text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block; 
clear: left; 
padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
width: 66px; 
float: right;
padding-bottom: 0.7em;	
}

 

Mvh

Vidar Mæland

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
vimael

vimael

Skrevet
  • Forfatter
Skrevet
Er IE du lager hacks for, ikke Firefox.

 

Begynn med å deklarere doctype. IE opererer nå, når du ikke har deklarert doctype, i såkalt Quirks Mode.

 

Kan du forklare dette nærmere?

 

I toppen av *.php ligger følgende linje:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Er det denne du mener? Hjelper i tilfelde lite.

Eller er dette feil doctype?

Skulle den også ligget i *.css filen?

Lenke til kommentar
Bakke

Bakke

Skrevet
Skrevet (endret)

Doctypen skal befinne seg i toppen av index-filen din, ja. Det vil si før headeren blir sendt ut ;)

 

Når du lager websider, så må du ha i bakhodet at det er ikke sikkert de oppfører seg likt i alle nettlesere. LightBox, som du her bruker for å vise bildet av bilen når brukeren klikker på det, fungerer bare i IE6 eller nyere versjoner, etter min erfaring. Det vil si at dette vil bare bli et problem for brukere som har IE 5,5 eller eldre.

 

Personlig syns jeg du skulle droppe støtten for eldre versjoner av IE, som mange andre velger å gjøre nå. Det er uansett ikke noe stort problem om en liten andel av brukerene, som bruker en troll gammel nettleser, ikke kan få vise bildet i LightBox.

 

Edit: Og som Haraldson sier, du lager hacks for IE, ikke for FF.

Endret av Bakke
Lenke til kommentar
vimael

vimael

Skrevet
  • Forfatter
Skrevet
Doctypen skal befinne seg i toppen av index-filen din, ja. Det vil si før headeren blir sendt ut ;)

 

Når du lager websider, så må du ha i bakhodet at det er ikke sikkert de oppfører seg likt i alle nettlesere. LightBox, som du her bruker for å vise bildet av bilen når brukeren klikker på det, fungerer bare i IE6 eller nyere versjoner, etter min erfaring. Det vil si at dette vil bare bli et problem for brukere som har IE 5,5 eller eldre.

 

Personlig syns jeg du skulle droppe støtten for eldre versjoner av IE, som mange andre velger å gjøre nå. Det er uansett ikke noe stort problem om en liten andel av brukerene, som bruker en troll gammel nettleser, ikke kan få vise bildet i LightBox.

 

Edit: Og som Haraldson sier, du lager hacks for IE, ikke for FF.

 

Selv bruker jeg IE7, men får en feil.

Lightboxen kommer opp, men den er ikke satt opp helt riktig.

I nyeste versjon av FF vises den rikitg.

 

Uansett så er ikke lightboxen det største problemet. Det er viktigere at resten av siden vises riktig også i FF.

 

Mvh

Vidar

Lenke til kommentar
vimael

vimael

Skrevet
  • Forfatter
Skrevet

Nå har jeg funnet noe av feilen, men sitter igjen med ett problem som ligger i koden under:

 

#TEXT {
width:800px;
margin-left:auto;
margin-right:auto;
}
#TEXT {
padding: 35px 40px 35px 40px;
border-bottom: 1px solid #484848;
border-top: 1px solid #484848;
background-color: #222222;
}
#TEXT p {
margin-bottom: 1em;
}

 

I IE blir det som jeg ønsker med en predde på 800px og innvendige marger på 40px

I FF legges margene til bredden slik at det samme feltet får en bredde på 880px

 

Noen tips til en løsning på dette?

 

Hvordan ser den ut i Opera og andre lesere i forhold til FF?

Lenke til kommentar
vimael

vimael

Skrevet
  • Forfatter
Skrevet
Som sagt, løsningen på breddeforskjellen du opplever løses ved å ta IE ut av Quirks mode. Det løses igjen ved å legge til en doctype øverst i dine HTML-dokumenter.

 

Hvordan? Hva?

 

Kan du forklare det nøyaktigere?

 

I en tidligere post ser du hvilken doctype som ligger øverst i dokumentet.

Er den feil?

 

Den hjelper lite ihvertfall.

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet

Du hadde ikke doctype da du åpnet tråden. Nuvel.

 

Under <body> har du en tabell, så et par <p>-er. Jeg er interessert i å vite hvor du lukker disse. Ser ikke ut som du gjør det. Slike ting er med på å ødelegge for deg og siden din. Fint om du kan kjøre siden din gjennom en HTML-validator og rette feilene den rapporterer om...

Lenke til kommentar
prfssrhlm

prfssrhlm

Skrevet
Skrevet

Det er nok et par feil ved siden din er jeg redd.

Har ikke sett gjennom feilene, men hvis du kjører den gjennom http://validator.w3.org/check så finner du at du har 146 errors og 10 warnings.

 

Det er en del. Kan godt hende noe av det er småtteri, men jeg tror jeg ville kikket litt nøyere gjennom hva du får opp av feilmeldinger.

 

Forøvrig, hvis du ofte har problemer med design som ser ulikt ut på diverse browsere så kan jeg anbefale å ta i bruk Yahoo sitt stylesheet for å fjerne formateringen som mange av browsere legger til av seg selv, så man virkelig starter å designe fra scratch. Bare å klistre denne: "<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">" inn i headeren rett foran stylesheetet du vil bruke :)

Lenke til kommentar
prfssrhlm

prfssrhlm

Skrevet
Skrevet
Nå fikk jeg til noe!

 

Kan noen bekrefte at nettsiden fungerer perfekt i alle nettlesere nå?

 

Den ser ut til å være lik i både FF og IE nå, men ser fortsatt rar ut i Chrome.

Lightbox'en funker, men bildet dukker opp langt ute på høyreside.

Lenke til kommentar
arthoz

arthoz

Skrevet
Skrevet
Nå fikk jeg til noe!

 

Kan noen bekrefte at nettsiden fungerer perfekt i alle nettlesere nå?

 

Fungerer fint i Opera, og som prfssrhlm, rar i Chrome.

 

Ellers anbefaler jeg deg å laste ned Opera og Chrome for å teste med de selv, tar jo ikke lange stunda, i alle fall mye kortere tid enn å vente på svar her inne

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...