Topic: Help with layout in Firefox Pages that link to <a href="https://ozoneasylum.com/backlink?for=24446" title="Pages that link to Topic: Help with layout in Firefox" rel="nofollow" >Topic: Help with layout in Firefox\

 
Author Thread
Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-19-2004 07:04 Edit Quote

Here is the site I am working on: http://www.ensellitis.com/css/

It seems to look okay in IE, except the nav, which looks ok anyway...

But in Firefox the DIV for the content shoots over to the right when I put overflow to auto... Can anyone help me with this?

The CSS for the layout is:

code:
/* Layout Stylesheet */ 

body {
margin:20px;
background:#808080;
color: #333333;
text-align:center;
padding:0;
}

#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}

#hdr {
height:162px;
background:#eeeeee;
color: #333333;
}

#bar {
height:25px;
background:#c0c0c0 url('nav_off.jpg');
color: #000000;
border:solid #000000;
border-width:1px 0 1px 0;
}

#bodyblock {
background:#c0c0c0 url('left_bg.jpg');
position:relative;
color: #333333;
width:650px;
padding:0;
}

#cont {
height: 500px;
overflow: auto;
width: 495px;
background:#ffffff;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
position:left;
}

#ftr {
height:40px;
background:#c0c0c0;
color: #333333;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}

#list-menu {
float:left;
color: #333333;
width:151px;
}

#list-menu ul {
margin: 2;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}

#list-menu li {
margin: 2px 0 0;
}

#list-menu a {
display: block;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #ABABAB url('nav_off.jpg');
text-decoration: none;
}

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list-menu a:hover {
border: 1px solid #000000;
background: #333333 url('nav_on.jpg');
color: #ffffff;
}



Thanks

____________________________________________________

Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-19-2004 07:06 Edit Quote

And if anyone can also help me make the menu span the entire left DIV that would be great as well

____________________________________________________

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-20-2004 19:15 Edit Quote

First thing I see:
#cont
{
position:left;
}
No such thing as position:left.
Position may be "absolute", "relative", or undeclared.
If undeclared, it acts !mostly! like "relative".

Actually, if I may...
You have lots of layers of complexity in here -- way more than necessary.

Do this:

code:
<html>
<head>
<!-- Head stuff here -->
</head>
<body>
<div id="header">
<h1>Ensellitis</h1>
<ul id="breadcrumbs">
<li>Ensellitis.com</li>
<li>Location</li>
</ul>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p>
<p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p>
<p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p>
<p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p>
</div>

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div id="footer">
<p>Hit counter stuff here (if you insist).</p>
<p>Copyright Stuff here.</p>
</div>
</body>
</html>


Simpler, no?

Then do something like this for css: (I'm including positioning stuff only. Backgrounds, colors, etc are your responsibility.)

code:
html, body
{
margin:20px 50px;
padding:0;
border:0;

background:#fff;
color:#000;

text-align:center;
}
#header
{
margin:0;
padding:0;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
#header h1
{
height:162px;

margin:0;
padding:0;

background:#555;
color:inherit;
}
#breadcrumbs
{
margin:0;
padding:5px 7px 3px;

text-align:left;

list-style:none;
}
#breadcrumbs li
{
display:inline;

margin:0;
padding:0 7px 0 0;
}
#content
{
float:right;
clear:right;
width:60%;

background:#eee;
color:#333;

text-align:left;
}
#menu
{
text-align:left;
list-style:none;
}
#menu li
{
display:block;

margin:1px;
padding:3px 5px 1px;
border:1px solid #000;
}
#footer
{
clear:both;

border:1px solid #000;
}



It probalby is not going to be perfect, but that should give you a good start in the right direction.
Write back here when you have questions and I will do what I can do answer them.

Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-20-2004 20:21 Edit Quote

That is ALOT simpler... I am going to get to work on using that... In order to fix it, I went ahead and added more layers, you can see it by clicking my sig. It looks ok, but I think I will start working on that one to make it alot simpler.

Also, is dreamweaver a good WYSIWYG editor for doing CSS? I tried using frontpage, but of course they suck

____________________________________________________

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-20-2004 20:51 Edit Quote

Dreamweaver is NOT a good WYSIWYG editor.
Dreamweaver isn't so bad as a tool to organize your files, create and maintain templates, etc., but DO NOT confuse that function with that of editor. There is no such thing as a good WYSIWYG editor.

You want an editor, try our own Mr. Max's HTML Beauty. Very nice.
When I'm on my Windows machine, that's all I use.

Next thing, get all that style and font crap out of markup. Use your stylesheet.
That being said, it's getting better.

Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-21-2004 00:12 Edit Quote

HTML Beauty is great... So far using what you have given me and from using this program I think I may have it...

I have re written what I had and now the stylesheet does all the work. There is no formating what so ever on the actual HTML page. Thanks for the help

____________________________________________________

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-21-2004 15:07 Edit Quote

Do you want some more suggestions, for a standards compliant page, or are you happy with what you have?
I'm happy to offer up help, especially on this topic, but I don't want to seem pushy either.

Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-21-2004 23:58 Edit Quote

The more the better

____________________________________________________

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 12-22-2004 02:18 Edit Quote

pssst, Ensellitis, welcome to the Asylum man, good to see someone so eager and diligent.

Ensellitis
Nervous Wreck (II) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 02:59 Edit Quote

Thanks. =) I actually came here a few years back and was alittle active, then along came war and health, but I finally made my way back when I got stumped, I love this place.

____________________________________________________

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 12-22-2004 03:07 Edit Quote

I noticed you got rid of like half of your validation warnings. Congrats
Most of your remaining errors are from:

1) Your navigation. (UL needs nested LIs)
Example:
<ul>
<li> entry </li>
<li> entry </li>
<li> entry </li>
<li> entry </li>
</ul>
This will most likely take some toying with to get crossbrowser-friendly.

2) I think if you close your input fields with /> instead of just > they should validate.



I focus on the pain; The only thing that's real (Trent Reznor)

(Edited by I X I on 12-22-2004 03:08)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 03:17 Edit Quote

Yeah, I had nothing to do today so I got started on that. I was working on the menu earlier but when I put each menu entry between the <li> it seems to put a break between each of them in IE... But I am working on it...

The only thing left to do is to do some editing in my blog script to get that to validate... That may have to wait till tommorow though.

You are right about closing the input fields... I did that with my shoutbox and the validated right away... So all that is left is to go through the blog and find all the instances that need to be changed to validate...

Thanks for the help all

____________________________________________________

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 06:40 Edit Quote

Well i figured it out...

I had to set the width and padding of the LI to equal the width for the container

____________________________________________________

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 12-22-2004 10:39 Edit Quote

playing around pays off

glad I could help you out

later,



Some people say I'm a dreamer, but I'm not the only one (John Lennon)

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-22-2004 14:25 Edit Quote

Uh...Mr. Ensellitis, I believe you have a hosting problem. Went there this morning to check out the changes you've made. Doesn't look pretty.
Let us know when you've gotten things straightened out.

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 20:53 Edit Quote

That was me =) I was up till like 5am Eastern US tweaking around with it and messed a few things up, it should be good now...

____________________________________________________

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-23-2004 09:44 Edit Quote

Last I heard it isn't possible to have a dynamic or CSS on a drop down meny when it comes to the arrow or the border... Is this true? Is there a way to have a full CSS version using DIV containers?

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 12-23-2004 15:41 Edit Quote

What you say is true, at least to the best of my knowledge. I think there may be some MS proprietary stuff, works in IE only, certainly not standard. I don't know for sure as I tend to stay away from such things.

I notice you still have lots of font tags in your markup. You are best served to rid yourself of these.
Furthermore, I see you also still have inline styles...

I see a "To do List" that's seperated with <br />.
Use the list tags, that's what they are for. <ul> for unordered lists, <ol> for ordered lists.
I see <font class="title">...? use <h*> tags, then style them appropriately.

I think your work may simply be a product of a lack of tag vocabulary. I highly recommend you check out w3c schools xhtml tag list. Learn what tags exist, and for what purpose. I know, it's going to feel (at least at first) a whole lot like reading a dictionary...mostly because it IS a whole lot like reading a dictionary, I suppose...but it'll be helpful.

Keep that link handy. I still use it today.

Next, see if you can't clean up some of those font tags, inline styles, and replace all the "lists" with actual lists and the "titles" with actual heading tags. That'll go along way toward cleaning up your page.
And eliminate every single <br />.

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-24-2004 08:15 Edit Quote

Well, guess what I earned today?





I had to remove my blog script and go through and do some misc editing, but I got the index and all of the other pages are now XHTML 1.0 valid...

Now to rewrite the blog and clean up the code...

Thanks for the help everyone, but don't you worry, I will be picking at your brains again, and again, and...

____________________________________________________



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu