Dynadot โ€” .com Registration $8.99

Css Positioning Problems

Spaceship Spaceship
Watch
Maylin

Maylin

Established Member
โ˜… 20 โ˜…
Impact
7
Hello people :tu:

I was wondering if anyone had any ideas or a chance to help me figure out why my website is positioned just fine in Mozilla, but Internet Explorer doesn't. What could be the cause of it, and could anyone show me how to get past this irritating problem between browsers. :td:

Here is my code, The positioning is fine in Mozilla, just not IE, this is my only concerns when it comes to making a website in css. :td:


P.S. Sorry for the long code, just looking for a way to get positioning to look the same as in Mozilla, with IE.

I did have all the code in the head section, in a style sheet, if it doesn't look right, sorry. But thank you for your time to help. :tu: :yell:


---------------------------------------Goes in CSS Style Sheet---------

body.satisfaction
{
background: url(pics/bubbles.gif);
}


u.big
{
font-size:15pt;
margin-left:7px;
font-family:sans-serif;
color: #030b5c;
}


p.small
{
font-size:13pt;
margin-left:15px;
font-family:sans-serif;
color:black;
margin-top:0px;
}



html

{
margin:0px;
padding:0px;

}



a
{
text-decoration:none;
}

a.yay:hover
{
text-decoration:underline;
color:blue;
}


/* Apart of Sabrina page */

.sabrina
{
position:absolute;
left:290px;
top:25px;
width:450px;
height:69px;
}

.top_border
{
background-color:#eeeeee;
width:535px;
height:87px;
position:absolute;
top:2px;
left:220px;
border:3px solid white;
}



.lily
{
position:absolute;
left:225px;
top:15px;
z-index:1;
}


/* Apart of Sabrina page */






/* Words Box Information */
.words
{
position:absolute;
left:373px;
top:120px;
width:375px;
height:93px;
border-bottom:2px solid #9DAEBE;
}



.words_box
{
position: absolute;
left: 373px;
top: 75px;
display:block;
width:363px;
height:90px;
line-height:normal;
color:white;
border:1px solid #030b5c;
padding:3px;
margin:2em auto;
}


/* End of Word Box information */





/* Leave alone Layers */
.marble
{
position:absolute;
left:354px;
top:102px;
width:403px;
height:461px;
background: url(pics/marble.jpg);
}


.top_grey_box
{
position:absolute;
left:350px;
top:102px;
width:410px;
height:464px;
background-color:#CDEBF8;
filter:alpha(opacity=75);-moz-opacity:.75;opacity:.55;
}


.bottom_grey_box
{
position:absolute;
left:350px;
top:102px;
width:410px;
height:464px;
background-color: grey;
}
/* Leave alone Layers */



#iframe

{
position:absolute;
top:223px;
left:373px;
height:318px;
border:0px;
}






/* Beginning of box content and its links */

.link_box
{
background-color:#030b5c;
width:120px;
height:450px;
position:absolute;
top:102px;
left:219px;
border:3px solid #ADBAC6;
padding: 4px; 0px; 0px; 3px;
}


/* Button Code */


a.navigation
{
display:block;
color:#030b5c;
background-color: blue;
text-decoration: none;
padding:1px 0px 1px 5px;
border:2px solid #33CCCC;
width:110px;
height:22px;
margin:2px;
margin-left:1px;
}


a.navigation:hover
{
display:block;
color:#fafad2;
background-color: #00ff00;
text-decoration:none;
padding: 1px 0px 1px 5px;
border:2px solid white;
}

/* Button Code */

/* End of box content and its links */





/* Footer Copyright Stuffies */
.footerin
{
background-color:black;
position:absolute;
left:330px;
top:570px;
width:380px;
height:17px;
border:0px;
}


.footerout
{
position:absolute;
left:-10px;
top:-2px;
width:430px;
height:17px;
}

/* Footer Copyright Stuffies */


--------------------------------------Goes in CSS Style Sheet---------



<html>
<head>

<title> Css Positioning </title>

</head>
<body class= "satisfaction">




<img class= "lily" src= "pics/flowers/lily.gif">



<div class= "top_border">

</div>

<div class= "sabrina">

<img src= "pics/s.gif" width= "60" height= "60">

<img src= "pics/a.gif" width= "60" height= "60">

<img src= "pics/b.gif" width= "60" height= "60">

<img src= "pics/r.gif" width= "60" height= "60">

<img src= "pics/i.gif" width= "60" height= "60">

<img src= "pics/n.gif" width= "60" height= "60">

<img src= "pics/a.gif" width= "60" height= "60">


</div>



<!-- BUTTONS ARE HERE -->


<div class= "link_box">



<div align= "center">
<span style="font-size:20;font-family: Helvetica;color: white;"> <u>Links</u> </span>
</div>
<br />


<a class= "navigation" href="http://www.google.com" target= "iframe1"> <span style="font-size:18;font-family: Helvetica;"> Images </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Marquee </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Thumbnail </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Table </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Scroll Bar </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> sdf </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>

<a class= "navigation" href= "http://www.google.com"> <span style="font-size:18;font-family: Helvetica;"> Tables </span></a>


</div>



<div class= "bottom_grey_box">
</div>



<div class= "marble">
</div>







<div class= "top_grey_box">
</div>



<!-- Word Box Information Don't Touch -->


<div class= "words_box">

<u class= "big">This Website</u>

<br />

<span style="float:left;margin:5px;padding:1px;border:1px solid #000000;background:white;"><img src="pics/monkey.gif" style="border:0px solid black;"></span>
<p class= "small"> The Purpose for this website is to <br /> demonstrate sample designs I can <br /> use on "your" site. :) </p>

</div>



<div class= "words">
</div>

<!-- Word Box Information Don't Touch -->




<div id="iframe">

<!----THIS IS A FRAME---->


<div align= "center"><iframe src= "iframe.html" frameborder= "0" width= "370px" height= "300px" scrolling= "no" name= "iframe1"></iframe></div>


<!----END OF FRAME---->
</div>




<div class= "footerout">

<!-- Webcard Footer -->
<div class= "footerin">

<span style="font-size:13; font-family: Helvetica;color: #b0eaf8;">Powered by Sabrina! </span> <a class= "yay" href="http://www.google.com"> <span style="font-size:14;color: white;">Web Hosting.</a> </span>
<span style="font-size:13; font-family: Helvetica;color: #b0eaf8;"> Copyright ยฉ2006 Sabrina, Inc. </span>

</div>

</div>



</body>
</html>
 
Reply
0
0 Like
0 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
AfternicAfternic
Sort by date Sort by points
#Border
{
width:780px;
margin:0px auto;
text-align:left;
background-color:#FFFFFF
}

I use this and it centers my whole site in both. You can change the name and the width. For some reason the margin:0px auto centers it. Try this code out and see if it works for you.
 
Reply
0
0 Like
0 Thanks
•••
It's not the way the whole site is positioned, it's the width and height that makes my site look different in IE. It looks aligned fine in Mozilla but in IE. A box that I have at a certain height/width in Mozilla takes on a different height/width in IE. Is there any way I can fix this? :tu:

Sorry for not explaining it well enough. :td:
 
Reply
0
0 Like
0 Thanks
•••
try this link here:

MY LINK

And look at it in Mozilla, then in Internet Explorer. You'll see what I mean by the css box width/height moving around. Was wanting it to look the same as in Mozilla. :td:

I hope this helped some. :tu:
 
Reply
0
0 Like
0 Thanks
•••
Your website looks fine in both IE and Firefox for me. IE does use a different box model than Firefox, so for instance the borders are on the outside in Firefox and on the inside in IE (might be the other way around). Same with padding.
 
Reply
0
0 Like
0 Thanks
•••
Log in or sign up to reply here.

  1. brainque.com

    • Make Offer

  2. Parlay.co

    • Make Offer

  3. roge.xyz

    • Make Offer

  4. netreon.com

    • Show Price

  5. DivinityLandscaping.com

    • Make Offer

  6. nuclearcodes.com

    • Make Offer

  7. GynoidGames.com

    • Make Offer

  8. abcdoo.com

    • Make Offer

  9. SiliconePacifier.com

    • Make Offer

  10. AgapeCoin.com

    • Show Price

Similar threads

P
Fine in Firefox 0.9, Bad in IE6
2 replies
1K views
pasha
P
dc1pop
Centering using CSS in ie
10 replies
2K views
RickM
RickM
T
Help needed!! Centering my site using css
6 replies
1K views
-TV-
-TV-
Xyzer
Php Gone Nuts
2 replies
685 views
Aris
A
M
CSS Navigation Menu IE Issue
0 replies
786 views
Moondreamer
M

We're social

Escrow.com

New posts โž”

Spaceship

Auction activity โž”

Unstoppable Domains

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest โž”

CryptoExchange.com

Hot this week โž”

Domain Recover

Community favorite โž”

Hot this month โž”

DomainEasy โ€” Payment Flexibility

Blog favorites

DomDB

  1. brainque.com

    • Make Offer

  2. Parlay.co

    • Make Offer

  3. roge.xyz

    • Make Offer

  4. netreon.com

    • Show Price

  5. DivinityLandscaping.com

    • Make Offer

  6. nuclearcodes.com

    • Make Offer

  7. GynoidGames.com

    • Make Offer

  8. abcdoo.com

    • Make Offer

  9. SiliconePacifier.com

    • Make Offer

  10. AgapeCoin.com

    • Show Price
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back