homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Hard Luck with CSS in all browsers.
tc3driver

5+ Year Member



 
Msg#: 8309 posted 6:59 am on Jan 26, 2006 (gmt 0)

Sorry I am a reletave n00b when it comes to css, I prefer the old school frames way of doing things...

but I decided to come into the 21st century, and am having more issues than I care to admit...

in IE, the single floating menu ends up all the way on the left, everything else is mostly centered (going for centered and aligned with everything else), Opera and FF the float is on top of the content and footer div's, but the text lies to the outside of the float, and everything is aligned to the left.

I am going for a page that works well in 1024x768.

and here is relevant code to be of as much help as possible

the CSS:

div#global {
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

div.menu {
width: 120px;
position: justify;
float: left;
margin-left: 0 auto;
margin-right; 0 auto;
border: 1px solid #c0c0c0;
background: #78C0DB;
}

div.contentbox {
border: 1px solid #c0c0c0;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 0px;
width: 772px;
padding: 10px;
background: #78C0DB;
text-align: left;
}

div.content {
border: 1px solid #c0c0c0;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 5px;
width: 772px;
padding: 10px;
background: #78C0DB;
text-align: left;
}

and the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">
<html>
<head>
<title>Lorem Ipsum Dolor Sit</title>
</head>
<body>
<div id="global">
<!-- Site Logo -->
<div class="head">
<img src="img.png" alt="lorem" title="lorem" width="924" height="186"/>
</div>
<div id="menu" class="menu">
<a class="home" href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
<a href="#">Lorem</a>
</div>
<div class="content">
<table>
...
</table>
</div>
<div class="content">
<table>
...
</table>
</div>
<div class="footer">
<p class="small">Lorem Ipsum</p>
</div>
</div>
</body>
</html>

any help would be greatly appreciated.

[edited by: createErrorMsg at 5:02 pm (utc) on Jan. 27, 2006]
[edit reason] Code clean up. [/edit]

 

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8309 posted 5:13 pm on Jan 27, 2006 (gmt 0)

tc3driver, sorry this one slipped through the cracks.

I see a few things that would result in the problem you describe.

First off, the global div is tagged in the source code with a CLASS name, but has a hash mark (#) in the selector. the hash mark matches to the ID attribute, not the CLASS name. Change the global div to this...

<div id="global">

...and you're part way there. This will allow the styles assigned to the global div to apply to that element, the most important of which to the problem you describe is the width and centering information.

Note, however, that when you do this, the contentbox will, in all likelihood, bump down below the menu. This is because the width calculations in your code are off.

With #global as the parent container, and set at 748px wide, you are limited to making the combined width of the floated menu and the unfloated contentbox no more than 748px wide. As it is now, the combined with of those two elements is...916px.

120px + 2px + 772px + 2px + 20px = 916px

which is...

menu width + menu border + contentbox width + contentbox border + contentbox padding = total box width

This calculation applies to all modern, compliant browsers (b/c you have a valid doctype).

Change those numbers around so that the total width equals no more than globals 778px and things should be more how you want them.

cEM

tc3driver

5+ Year Member



 
Msg#: 8309 posted 8:40 pm on Jan 27, 2006 (gmt 0)

That was a typo on my part...
the width was suposed to be 924

(the image width)

tc3driver

5+ Year Member



 
Msg#: 8309 posted 8:47 pm on Jan 27, 2006 (gmt 0)

No edit button...

so sorry for the double post...

and thanks for the help...

now works as it should :D

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved