Jump to content
Sign in to follow this  
P@rm@nn

css position Firefox/opera/ie

Recommended Posts

Når jeg nå er hjemme i ferien tenke jeg at jeg skulle leke meg litt med css, og lagde i dag dette lille designet. Buggen ligger i overskriften. Det enkleste er om du ser den i både firefox og explorer/opera. I de 2 siste browserene så er overskriften langt oppe i toppen, mens i firefox ligger den fint riktig sted. Om jeg prøver å flytte den nedover ved f.eks top: 100px; så skjer det forskjellige ting i alle browserene;

opera: Ligger perfekt

Ie: Ligger fint, men øverste halvpart av fontene vises ikke.

Firefox: Skriften vises fint, men ligger for lavt.

Den aktuelle css koden er:


#banner {
       position: absolute;
top: 0px;
left: 20%;
padding: 0px;
margin-bottom: 20px;
}

#banner h1 {
font-family: Helvetica, Arial, sans-serif;
color: #CCCCCC;
font-size: 100px;
line-height: 18px;
font-weight: normal;
text-transform: uppercase;
}

Noen tips om hvordan jeg kan få overskriften til å vises likt i alle browsere?

Share this post


Link to post

Jeg tok en titt, men ikke så grundig sjekk.. så jeg rask gjorde slik:

 

CSS:

body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
color: #666;
background-color: #fff;
}

img { border: 0; }

#banner h1 {
font-family: Helvetica, Arial, sans-serif;
color: #CCCCCC;
font-size: 100px;
text-transform: uppercase;
margin-top: -130;
margin-left: 250px;
}

 

Jeg fjernet noe smått i html filen:

 

<div id="banner">
<img src="img2.jpg" alt="Logo" width="187" height="140"><h1>Overskrift</h1></div>

 

--- Testet i IE, FF, Mozilla ---

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...