PDA

View Full Version : Different widths on different computers



RomeosKlassicDJ
Jul 16th, 2010, 09:05 PM
Okay, I have a problem with my toolbar on my website (I am using CSS). I can't seem to get its width to stay consistent in all browsers. I'll get it fixed up and looking really nice on one computer, then check it on another and the toolbar will either be too short or too long. I usually use width: #px; to set the width, and I've tried doing width: 100%; but this totally messes it up. I have been working at this for several weeks, trying different methods, different toolbars, etc., and can't seem to get it to work. I'm getting really frustrated. Could someone please help me?

Thanks in advance!

P.S. I saw Austin88 had a similar post, but it didn't help me.

skywalker2208
Jul 16th, 2010, 09:18 PM
Can you provide us with a link, if not then can you provide the code?

Drakius
Jul 16th, 2010, 09:19 PM
Is your website live somewhere? If yes, can you link it here? Or do you have the code you could share of your HTML and CSS? That would really help people in trying to help solve your problem.

EDIT: Eh, Skywalker posted a minute before me, but yes, what he said. :)

RomeosKlassicDJ
Jul 16th, 2010, 09:38 PM
The link to the website is http://www.horselover.net16.net.

Here is the entire CSS code (It's kind of a lot, because of all the tests I've done, but I cut down on some of it and didn't have time to go through the rest):



body
{
background-color:#ffffff;
font-size:100%;
width:100%;
border-style:solid;
border-width:1px;
border-color:black;
}
#cssm1 * { padding:0; margin: 0; font: 1em arial; }

#cssm1 { position: absolute; z-index: 99; margin: 0 auto; align: center; line-height: 20px; }

#cssm1 a { display: block; border: 1px solid #fff; color: #ffffff; background: #008000; text-decoration: none; padding: 3px 10px; }
#cssm1 a:hover { background: #006400; }


#cssm1 ul li, #cssm1 ul li ul li { width: 150px; list-style-type:none; }

#cssm1 ul li { float: left; width: 157px; }

#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 150px;
}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;
}

#cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 150px;
margin-top: -20px;
}
div.footer
{
background-color:#000;
color:#fff;
font-family:"Courier New", monospace;
font-size:1em;
text-align:right;
}
div.header
{
background-color:#000;
}
div.editing
{
background-color:#d3d3d3;
}
div.scroll
{
background-color:#d3d3d3;
color:#000;
font-size:.85em;
width:300px;
height:81px;
overflow:hidden;
position:absolute;
top:510px;
left:410px;
z-index:-1;
}
div.duh
{
background-color:#d3d3d3;
color:#000;
text-align:left;
width:300px;
height:255px;
overflow:hidden;
position:absolute;
top:41%;
left:410px;
z-index:-1;
}
div.extras
{
background-color:#a9a9a9;
color:#ff0000;
font-size:.75em;
width:300px;
height:18px;
overflow:hidden;
position:absolute;
top:62%;
right:28%;
z-index:-1;
}
a.duh
{
background-color:#d3d3d3;
font-weight:bold;
color:#000;
width:300px;
height:22px;
overflow:hidden;
position:absolute;
top:1%;
left:1%;
z-index:-1;
}
div.contain
{
color:#000000;
font-family:"Times New Roman", serif;
font-size:1.2em;
}
div.descrip
{
color:#000000;
font-family:"Times New Roman", serif;
font-size:.85em;
}
div.other
{
color:#000000;
font-family:"Times New Roman", serif;
font-size:1em;
}
div.otherdescrip
{
color:#000000;
font-family:"Times New Roman", serif;
font-size:.85em;
}
a.link
{
font-weight:bold;
font-size:.80em;
color:#000000;
}
div.sidestuff
{
color:#000000;
font-family:"Times New Roman", serif;
font-size:.85em;
width:25%;
position:absolute;
top:42%;
right:2%;
z-index:-1;
float:right;
}

skywalker2208
Jul 16th, 2010, 10:19 PM
Link doesn't work

RomeosKlassicDJ
Jul 16th, 2010, 10:45 PM
Hmm.....it works for me.

Let me try this again:

http://www.horselover.net16.net/ (http://www.horselover.net16.net)

Or, type www.horselover.net16.net into your browser.

If this doesn't work, I'm totally puzzled. :confused:

abduraooft
Jul 17th, 2010, 09:58 AM
Okay, start with fixing the errors in your markup ,see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.horselover.net16.net%2F

Apostropartheid
Jul 18th, 2010, 01:18 AM
You would set the width of the list items to be a percentage of the total width of the page (i.e., here, 100/9)
However, I wouldn't bother and would go for a fixed-width design, or at least have a max-width, for that header looks pretty damn awful on my screen, and I'm not even browsing full-screen. Also note that taking up the full width of the browser looks really strange on anything which isn't 1024 by 768 pixels.

And, by gods, why do you need so many line breaks?