Sign in to follow this  
Silent Dragon

[web] [Sorted...for now]CSS positioning being a pain..

Recommended Posts

Silent Dragon    184
Basically on me site i have a logo at the top left, a menu down the left hand side, a login box next to the logo at the top and then i need the main body to be under the logo and next to the menu. I have been trying methods with absolute and relative values, but they always look different and wrong in either IE7 or FF2. I read that absolute values don't work correctly in FF and I also found that problem (wether it was IE or FF that was wrong is irrelevant, they were different and I need them to be positioned the same) so I tried relative positioning, but I am having trouble with that displaying properly now. Any advice you can give me? Or point me in the right direction? Also, if I add a link to my menu, I will then have to go and change the relative values of the login box and the main body, is there a way around this? Thanks, SD [Edited by - Silent Dragon on March 2, 2007 8:32:10 PM]

Share this post


Link to post
Share on other sites
Sander    1332
Have you got a link? That makes helping you out much easier.

Also check the Forum FAQ and the resource sticky. There's plenty of CSS positioning links in there.

Share this post


Link to post
Share on other sites
Instruo    373
Might not be entirely the issue you're having, but I do have a useful tip for handling the slight differences between IE and FF rendering pixel positions.

What you can do is create a style that is specific for IE and one that other browsers will read. This works because IE will read style names that start with a * (used to be _, but it doesn't work in IE7)

So, you can do something like this:

top: 5px; *top: 10px

Firefox will use 5, IE will use 10. Make sure to put the IE version after the Firefox version, as IE will still pick up the normal one and it will use the last version of the specific style that was declared.

Hope that helps a bit!

Share this post


Link to post
Share on other sites
Silent Dragon    184
Hmm I don't have a link because I don't have access to my external server and I'm just re-writing my code, but i could post the code here and you could just notepad it, if you're willing to do that. I have been looking through the 'Resources' section, and specifically ALA, which pointed out that my many div's weren't the best way of doing it but I don't htink that is the main problem.


/* silentdragon.css */
body
{
background-color: #21294E;
color: #FFFFFF;
}

.mainbody
{
/* Have to use relative to get same view in both IE and FireFox */
/* Will need to be changed if the header is changed any */
position: relative;
top: -350;
left: 175;
}

/**************************
*
* Header details
*
***************************/


.menubar div
{
width: 150px;
margin: 0px;
}

.menubar img
{
width: 150px;
height: 25px;
border: 0;
margin: 0;
padding: 0;
vertical-align: bottom; /* to fix silly gap in IE */
}

.menubar a:link, a:active, a:visited
{
display: block;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #FFFFFF;
border: 1px solid white;
border-top: none;
background-color: #2D365D;
}

.menubar a:hover
{
background-color: #99CCFF;
color: #002255;
}

.menusection
{
margin-bottom: 20px;
}

/* User Details */
.userlogin
{
width: 600px;
height: 100px;
color: #FFFFFF;
position: relative;
top: -275;
left: 450;
}

.loginbox
{
}

.loginbox input
{
background-color: #2D365D;
color: #FFFFFF;
}


/**************************
*
* Footer Details
*
***************************/


.footer p
{
text-align: center;
font-size: 12px;
color: #abcdef;
}





Html file

<html>
<head>
<title>Silent Dragon - News</title>

<link rel="stylesheet" type="text/css" href="silentdragon.css" />
</head>
<body>

<div class="titlebanner">
<img src="images/SD_Title.gif" alt="SilentDragon.co.uk" />
</div>


<div class="menubar">
<div class="menusection">
<div class="generalmenu">
<div class="generalmenuheader">
<img src="images/Home.gif" alt="Home" />
</div>
<div class="generalmenuitem">
<a href="news.php">News</a>
<a href="sd_team.php">SD Team</a>

</div>
</div>
</div>
<div class="menusection">
<div class="usermenu">
<div class="usermenuheader">
<img src="images/User.gif" alt="User" />
</div>
<div class="usermenuitem">

<a href="mypage.php">My Page</a>
</div>
</div>
</div>
<div class="menusection">
<div class="gamemenu">
<div class="gamemenuheader">
<img src="images/Game.gif" alt="Game" />

</div>
<div class="gamemenuitem">
<a href="game.php">Game</a>
<a href="myarmy.php">My Army</a>
<a href="recruit.php">Recruit</a>
</div>
</div>

</div>
<div class="menusection">
<div class="communitymenu">
<div class="communitymenuheader">
<img src="images/Community.gif" alt="Community" />
</div>
<div class="communitymenuitem">
<a href="forum.php">Forum</a>

<a href="top_users.php">Top Users</a>
</div>
</div>
</div>
</div>

<div class="userlogin">
<div class="loginbox">
<p>
Username: <input type="text" name="username">

Password: <input type="password" name="userpassword">
<input type="submit" value="Login" name="login">
</p>
</div>
</div>

<div class="mainbody">
error oh noes
</div>
<div class="footer">
<p>© SilentDragon.co.uk
<br />

Programmed by Alan Race
</p>
</div>
</body>
</html>




Quote:
Original post by Instruo
Might not be entirely the issue you're having, but I do have a useful tip for handling the slight differences between IE and FF rendering pixel positions.

What you can do is create a style that is specific for IE and one that other browsers will read. This works because IE will read style names that start with a * (used to be _, but it doesn't work in IE7)

So, you can do something like this:

top: 5px; *top: 10px

Firefox will use 5, IE will use 10. Make sure to put the IE version after the Firefox version, as IE will still pick up the normal one and it will use the last version of the specific style that was declared.

Hope that helps a bit!


That might help a bit, what about other browsers though? Like Opera and the like, how different are they?

Thanks for your time
SD

Share this post


Link to post
Share on other sites
JohnBSmall    881
A few general points that I often find are the cause of positioning problems in stuff I do (when I forget them):

  • The width and height specifiers refer to the dimensions within the padding, border and margin (ie, if you want a 100 pixel wide box and you have 5-pixel padding left and right, then you need to set the width to 90, not 100). [Actually, in IE, this isn't quite true]

  • The above is still the case when you use percentages. For example, say you have a header bar at the top of the page, with width: 100% and 15px padding left and right. You want to have breadcrumbs aligned on the right within this bar, so you use absolute positioning on the breadcrumb container, setting right: 5px. This will actually put the container in the wrong place - you need to add 30 to the offset to account for the extra 30px of width in the header bar that comes from having 15px of padding.

  • Absolute positions are relative to the current positioning context (this may not be the correct terminology btw) - they aren't just relative to the direct containing element, they're relative to the closest containing element that has position: absolute or position: relative. I often end up setting one of my container elements to relative positioning with top and left set to zero, just to start a new positioning context (and include a comment in the CSS file to say that's what I'm doing).

  • Use a border style (I generally use border: 1px dotted red;) when you're debugging - it's a really easy way of checking where elements really are (sometimes it's not obvious). On browsers that support it (like firefox), you could use an outline style instead (outlines don't affect the flow of the page, unlike borders, so they're even better really).

  • Do check the CSS documentation while you're working.

  • Make sure you specify a valid doctype (and generally start the file correctly) - it's very easy to flip IE into quirks mode, which will make it a whole lot harder to get things consistent across browsers.



Edit: And have a look at the BrainJar CSS Positioning tutorial.

John B

Share this post


Link to post
Share on other sites
Silent Dragon    184
Quote:
Original post by JohnBSmall
A few general points that I often find are the cause of positioning problems in stuff I do (when I forget them):

  • The width and height specifiers refer to the dimensions within the padding, border and margin (ie, if you want a 100 pixel wide box and you have 5-pixel padding left and right, then you need to set the width to 90, not 100). [Actually, in IE, this isn't quite true]

  • The above is still the case when you use percentages. For example, say you have a header bar at the top of the page, with width: 100% and 15px padding left and right. You want to have breadcrumbs aligned on the right within this bar, so you use absolute positioning on the breadcrumb container, setting right: 5px. This will actually put the container in the wrong place - you need to add 30 to the offset to account for the extra 30px of width in the header bar that comes from having 15px of padding.

  • Absolute positions are relative to the current positioning context (this may not be the correct terminology btw) - they aren't just relative to the direct containing element, they're relative to the closest containing element that has position: absolute or position: relative. I often end up setting one of my container elements to relative positioning with top and left set to zero, just to start a new positioning context (and include a comment in the CSS file to say that's what I'm doing).

  • Use a border style (I generally use border: 1px dotted red;) when you're debugging - it's a really easy way of checking where elements really are (sometimes it's not obvious). On browsers that support it (like firefox), you could use an outline style instead (outlines don't affect the flow of the page, unlike borders, so they're even better really).

  • Do check the CSS documentation while you're working.

  • Make sure you specify a valid doctype (and generally start the file correctly) - it's very easy to flip IE into quirks mode, which will make it a whole lot harder to get things consistent across browsers.



Edit: And have a look at the BrainJar CSS Positioning tutorial.

John B


Thanks for that, using your border tip I noticed the difference between them, for some reason when describing a div as..
.userlogin
{
width: 600px;
height: 100px;
color: #FFFFFF;
position: relative;
top: -275;
left: 450;
border: 1px dotted red;
}
in IE it placed the contents of the div (the login form) at the very top of the box, but in FF there was a gap between the top and the form. Any ideas?

Thanks,
SD

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this