/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS rod i IE7
Fra : Søren Larsen


Dato : 08-12-07 20:28

Hej NG.

Jeg er ret ny i CSS og prøver at lære...

Jeg lavede denne side http://www.udv.ac2670.net/test/test.htm som ser fin ud
i IE6, men jeg fik noget af et chok da jeg så den i IE7, hvor den ser
forfærdelig ud; alting er rodet rundt. Meningen var at billedet og den blå
boks skulle være inde i den øverste ramme og resten neden under. Istedet er
alt det nedenunder rammen røget op så den blå boks dækker en del af menuen.

Dette er CSS'en:

body{
font-family: Arial,sans-serif;
color: #333333;
background: #ffffff;
line-height: 1.166;
margin: 0px 20px 0px 20px;
padding: 0px;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#siteName{
margin: 0;
padding: 0 0 0 10px;
}

#top{
height: 60px;
margin: 0px 0px 10px 0px;
padding: 5px 5px 5px 5px;
border: 1px solid #cccccc;
}

#topBar{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
height: 60px;
padding: 20px 0px 10px 0px;
color: white;
text-align: center;
background-color: #003366;
position: absolute; top:50px; left:200px; width:80%;
}

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


Hvis jeg fjerner height: 60px; i #top, virker det!

På forhånd tak.
Søren



 
 
Jørgen Farum Jensen (08-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 08-12-07 20:57

Søren Larsen skrev:
> Hej NG.
>
> Jeg er ret ny i CSS og prøver at lære...
>
> Jeg lavede denne side http://www.udv.ac2670.net/test/test.htm som ser fin ud
> i IE6, men jeg fik noget af et chok da jeg så den i IE7, hvor den ser
> forfærdelig ud; alting er rodet rundt. Meningen var at billedet og den blå
> boks skulle være inde i den øverste ramme og resten neden under. Istedet er
> alt det nedenunder rammen røget op så den blå boks dækker en del af menuen.
>
> Dette er CSS'en:

Du behøver ikke at gengive alt din CSS i disse postings.
Vi kan godt finde din CSS-kode når du har et
link til siden.

> Hvis jeg fjerner height: 60px; i #top, virker det!

I første omgang skal du betænke at et absolut
positioneret element altid placerer sig i forhold
til browservinduets øverste venstre hjørne.

Altså hvis du ikke positionerer i forhold til et
forældreelement, der også har en position.

Et af dine problemer løses i hvert fald
hvis du sætter position-egenskaben på
dit #top-element: position:relative;

Der er også en del syntaksfejl, så
næste opgave må være at validere det du
har lavet:
http://validator.w3.org


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger (08-12-2007)
Kommentar
Fra : Birger


Dato : 08-12-07 21:03

"Søren Larsen" <sblar1fjernherfra@surfpost.dk> skrev i en meddelelse
news:475af03a$0$2111$edfadb0f@dtext02.news.tele.dk...
> Hej NG.
>
> Jeg er ret ny i CSS og prøver at lære...
>
> Jeg lavede denne side http://www.udv.ac2670.net/test/test.htm som ser fin
> ud i IE6, men jeg fik noget af et chok da jeg så den i IE7, hvor den ser
> forfærdelig ud; alting er rodet rundt. Meningen var at billedet og den blå
> boks skulle være inde i den øverste ramme og resten neden under. Istedet
> er alt det nedenunder rammen røget op så den blå boks dækker en del af
> menuen.
>
> Dette er CSS'en:



bla. bla. bla... ;>)

Den ser temmelig ens ud i IE6 og IE7 her.

Hvis der er "rod i css", er det nok snarere i IE6 end IE7.
Brug FireFox til design og check - og ret til specifikke browsere efter det.
Til FireFox kan findes nogle temmelig gode værktøjer - desuden er FF bedst
til at overholde standarderne, siges der.

Husk også flittigt brug af validatorer, som f.eks:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Din XHTML fejler, hvilket gør resten af dine anstrengelser ganske
overflødige..

Birger
-----
http://bbsorensen.dk



Rune Jensen (08-12-2007)
Kommentar
Fra : Rune Jensen


Dato : 08-12-07 22:05

"Birger" skrev...

> Brug FireFox til design og check - og ret til specifikke browsere efter
> det.
> Til FireFox kan findes nogle temmelig gode værktøjer

Ja, og ét af dem er http://totalvalidator.com/tool/extension.html

....som man vil få brug for før eller siden.


MVH
Rune Jensen

--
WinAMP lige nu: Depeche Mode - Blasphemous Rumors
Kaffestatus: middel
Cigaretbeholdning: kritisk



Philip Nunnegaard (09-12-2007)
Kommentar
Fra : Philip Nunnegaard


Dato : 09-12-07 04:27

> Brug FireFox til design og check - og ret til specifikke browsere efter
> det.
> Til FireFox kan findes nogle temmelig gode værktøjer - desuden er FF bedst
> til at overholde standarderne, siges der.

Præcis grunden til, at jeg gennem det sidste års tid har brugt FireFox ved
design af nye hjemmesider.
Og med HTML-Tidy, som er et plugin til FF, der giver et hurtigt hint, hvis
éns kode ikke validerer, går det som smurt.

HTML-Tidy kan hentes her:
http://sourceforge.net/projects/tidy

Specielt hvis man som jeg ellers primært bruger IE, er der gode chancer for,
at man opdager ting, der ser forkert ud enten i en standard-overholdende
browser som FF eller i IE.

Med IE7 synes jeg dog, at det generelt er blevet meget lettere at lave
noget, der ser OK ud i de fleste browsere, og som samtidig validerer.
Det er ikke længere som at blæse og have mel i munden samtidig.

Og heldigvis har ie7 overhalet ie6 i udbredelse nu (med Vista har man -
modsat med XP - ingen chance for at have ie6 og -7 på samtidig).


Stig Johansen (09-12-2007)
Kommentar
Fra : Stig Johansen


Dato : 09-12-07 05:14

Philip Nunnegaard wrote:

> Og med HTML-Tidy, som er et plugin til FF, der giver et hurtigt hint, hvis
> éns kode ikke validerer, går det som smurt.
>
> HTML-Tidy kan hentes her:
> http://sourceforge.net/projects/tidy

Jeg synes også lige du skal nævne webdeveloper plugin.
Når vi snakker CSS er der gode muligheder for at 'lege' med CSS'en.

--
Med venlig hilsen
Stig Johansen

Philip Nunnegaard (09-12-2007)
Kommentar
Fra : Philip Nunnegaard


Dato : 09-12-07 07:51

> Jeg synes også lige du skal nævne webdeveloper plugin.
> Når vi snakker CSS er der gode muligheder for at 'lege' med CSS'en.

Jeps! Den er uundværlig, hvis CSS'en driller!


Birger (09-12-2007)
Kommentar
Fra : Birger


Dato : 09-12-07 12:27

"Philip Nunnegaard" <philip@fjerndettehitsurf.dk> skrev i en meddelelse
news:475b609b$0$15887$edfadb0f@dtext01.news.tele.dk...
>> Brug FireFox til design og check - og ret til specifikke browsere efter
>> det.
>> Til FireFox kan findes nogle temmelig gode værktøjer - desuden er FF
>> bedst til at overholde standarderne, siges der.
>
> Præcis grunden til, at jeg gennem det sidste års tid har brugt FireFox ved
> design af nye hjemmesider.
> Og med HTML-Tidy, som er et plugin til FF, der giver et hurtigt hint, hvis
> éns kode ikke validerer, går det som smurt.
>
> HTML-Tidy kan hentes her:
> http://sourceforge.net/projects/tidy
>
> Specielt hvis man som jeg ellers primært bruger IE, er der gode chancer
> for, at man opdager ting, der ser forkert ud enten i en
> standard-overholdende browser som FF eller i IE.
>
> Med IE7 synes jeg dog, at det generelt er blevet meget lettere at lave
> noget, der ser OK ud i de fleste browsere, og som samtidig validerer.
> Det er ikke længere som at blæse og have mel i munden samtidig.
>
> Og heldigvis har ie7 overhalet ie6 i udbredelse nu (med Vista har man -
> modsat med XP - ingen chance for at have ie6 og -7 på samtidig).

Mener nu at jeg med Tidy, får en masse ikke eksisterende fejl, når koden er
XHTML, så den holder jeg mig fra.
Bruger W3C's side til validering.
Jeg bruger Firebug til udvikling - den finder både CSS, HTML og clientside
script bugs. Kan også singlesteppe script.
http://www.getfirebug.com/

Birger
-----
http://bbsorensen.dk



Søren Larsen (09-12-2007)
Kommentar
Fra : Søren Larsen


Dato : 09-12-07 10:24

Hej alle.

Mange tak for alle svarene, jeg kan se at jeg har meget at lære her.

Grunden til at det så ens ud i IE6 og IE7, var at jeg havde den height på i
#top, som fik det til at se normalt ud. Undskyld! Den er væk nu og siden
validerer, både html og css. Jeg har også sat position: relative; på, som
Jørgen foreslog - alt sammen uden nytte. Vil prøve at tage endnu et kig og
fortælle mig hvorfor IE7 smadrer det hele?

/Søren



Søren Larsen (09-12-2007)
Kommentar
Fra : Søren Larsen


Dato : 09-12-07 10:59

Efter at prøvet Totalvalidator på siden, ser det nu mere ud til at det er en
bug i IE6 og bagud der gør at siden ser pæn ud. Alle andre browsere opfører
sig ligesom IE7.
?????



Birger (09-12-2007)
Kommentar
Fra : Birger


Dato : 09-12-07 13:04

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:475bbc6a$0$2106$edfadb0f@dtext02.news.tele.dk...
> Efter at prøvet Totalvalidator på siden, ser det nu mere ud til at det er
> en bug i IE6 og bagud der gør at siden ser pæn ud. Alle andre browsere
> opfører sig ligesom IE7.
> ?????



Præcis.
Snakker vi standarder, har IE7 og de andre ret, og det er IE6 der ikke viser
tingene rigtigt.

Sæt float: left på både billedet og på #topbar - og fjern position fra
#topbar.
Din #top har en højde på 60px - hvilket hverken er nok til billedet (hvis
det skal være 155px) eller din #topbar med den angivne css(font og tekst) og
indhold.
Med mindre du vil have den nederste streg til at gå bag dem, skal højden
tilpasses - hvilket også får indhold under billedet til at falde på plads ud
til venstre.

Der er et problem med blanding af absolutte værdier og %'er.
Din #topbar vil gå ud over sidekanten og/eller hoppe ned under billedet, når
den besøgendes browser bliver for smal.
Det kan "fixes" med en fast (stor nok) bredde på #masthead, hvor der så vil
komme en vandret scroll på "for små" browsere i stedet.
I øvrigt bør du sætte både margin og padding på body til 0px, når du bruger
100% som bredde. De regnes begge med til bredden, men bruges ikke til at
vise indholdet. Du vil derfor altid få den vandrette scrollbar.

Birger
-----
http://bbsorensen.dk



Søren Larsen (09-12-2007)
Kommentar
Fra : Søren Larsen


Dato : 09-12-07 14:56


"Birger" <sdc@bbsorensen.com> skrev i en meddelelse
news:475bd9c4$0$90275$14726298@news.sunsite.dk...
...........................

Tak Birger. Der var da nogen gode hints og noget konkret at gå i gang med -
og det vil jeg så gøre.

Er der andet jeg skal være opmærksom på i forb. med CSS? ......Ja,
selvfølgelig er der det! Der er garanteret en masse, men det må jeg lære
efterhånden. Jeg tænker mere på nogle, for jer CSS-hajer, åbenlyse sandheder
eller grundlæggende tommelfingerregler som kunne spare mig nogle
frustrationer. Det er ikke fordi jeg skal lave noget vældig fancy't, men
synes bare at det var på tide at komme væk fra hele tabel-racet omkring
layout og kigge på noget CSS som alle jo anbefaler.

/Søren




Birger (09-12-2007)
Kommentar
Fra : Birger


Dato : 09-12-07 15:58

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:475bf400$0$2096$edfadb0f@dtext02.news.tele.dk...
>
> "Birger" <sdc@bbsorensen.com> skrev i en meddelelse
> news:475bd9c4$0$90275$14726298@news.sunsite.dk...
> ..........................
>
> Tak Birger. Der var da nogen gode hints og noget konkret at gå i gang
> med - og det vil jeg så gøre.
>
> Er der andet jeg skal være opmærksom på i forb. med CSS? ......Ja,
> selvfølgelig er der det! Der er garanteret en masse, men det må jeg lære
> efterhånden. Jeg tænker mere på nogle, for jer CSS-hajer, åbenlyse
> sandheder eller grundlæggende tommelfingerregler som kunne spare mig nogle
> frustrationer. Det er ikke fordi jeg skal lave noget vældig fancy't, men
> synes bare at det var på tide at komme væk fra hele tabel-racet omkring
> layout og kigge på noget CSS som alle jo anbefaler.
>
> /Søren
>
>
>

Jeg ser ikke mig selv som nogen hverken guru eller haj.
River selv tit i mit eget hår, når skidtet ikke vil som tænkt ;>)

Man bliver dog aldrig for gammel til at lære.
At gøre det efterhånden er for mig en god måde - der findes næppe nogen der
kan læse det hele og derefter bare bruge det..

At droppe table-racet er nok en god ide.
Der er dog lidt en tendens til aldrig at bruge tabeller - tabeller er til
præsentation af data, og må/skal bruges der. Men de er ikke til side-design.

Der er masse af sider at begynde med - brug goofle. ;>)


Birger
-----
http://bbsorensen.dk



Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408522
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste