Alignment issues with floating lists over backgrounds

Ok, I'm at my wits end -- I've been trying to get this to work for the longest time to be met with this one irking problem.

site: http://www.buckeyeakpsi.com

this website is one i've been working with for the past few months. I've gotten the sheets pretty much ready to go except one stupid quirk:

If you'll notice, the 'members entrance' link is lined up perfectly with where I need it to be. However, the main site links are not lined up. However, when I go to view it in dreamweaver, both lists line up perfectly with what I want. Basically the 'ul.top' is what is giving me fits.

HELP!

Have you tried

*{margin:0;
padding:0;
}

at the very start of your css. It resets all the margin and padding to zero.
Gives an even starting point to all browsers. It certainly makes a difference on my PC.

(Using Firefox and Firebug.)

Frank

I plugged that in to my 'sheet... but do I need to call it up in the HTML? I have the container set up to have no margin or padding itself if that makes any difference.

Did it fix the issue I had, or did it make things slightly better?

It should be the first item in your css. The diferrent browsers set off with a different starting value, and what values you use, will often be added to the starting value (the default for the browser)

Starting the css with
*{margin:0;
padding:0;
}

gives all the browsers a level playing field.

It may mean that you have to modify what you yourself have selected for a div, but at least all the browsers will get the same instruction.

HTML does not need to be altered for this extra css.

ALSO You do not have a DOCTYPE, This should be your first line of code.
See the "Sticky" at the head of the CF page.

Try this.

ul.top {
padding: 0;
margin: -5px; - adjust as needed
list-style-type: none;
left: 200px;
}

It works for me.

http://www.exitfegs.co.uk/atestb.htm with Doctype added.

Also, look here. http://exitfegs.co.uk/Sources.html


Frank

Frank,

Thanks for your help but I'm still having some issues.

The issue i'm having the most problem with is the div/ul tag "top"

When you preview in IE/Safari, the tag renders correctly in relation to what I have set it to in design view in Dreamweaver.

However, Firefox (the usual culprit) is not displaying it properly, I adjusted the margin to -11 and it is still slightly off of what is projected in Dreamweaver by a few pixels. However, the 'members' tag has never had this issue.

I'm just trying to figure out why the tags would come up in two different places in two different browsers, yet a similar tag never has this issue

Ok, I'm at my wits end -- I've been trying to get this to work for the longest time to be met with this one irking problem.

site: http://www.buckeyeakpsi.com

this website is one i've been working with for the past few months. I've gotten the sheets pretty much ready to go except one stupid quirk:

If you'll notice, the 'members entrance' link is lined up perfectly with where I need it to be. However, the main site links are not lined up. However, when I go to view it in dreamweaver, both lists line up perfectly with what I want. Basically the 'ul.top' is what is giving me fits.

HELP!

you have invalid markup, no doctype and no title, encoding declaration.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.buckeyeakpsi.com%2F

fix them and post further problems if you need.

PS: you can move all your inline style into a external css file and add in front the global reset, as in previous replays, but you must use link element in html to use them.

best regards

Ok, I've updated the webpage

However, I'm still having the same issue with Firefox.

Again, the "Members" link at the top remains stationary in the editor, and displays the way I want it to in both browsers.

However, the bar of links does not display properly in Firefox... but does in IE.

Ok, I've updated the webpage

However, I'm still having the same issue with Firefox.

Again, the "Members" link at the top remains stationary in the editor, and displays the way I want it to in both browsers.

However, the bar of links does not display properly in Firefox... but does in IE.

you still have the same problem, invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.buckeyeakpsi.com%2F

in abssence of valid code, browsers show what guess you want to do.

best regards

Apologies for the bump, but despite all of my efforts I am STILL having the exact same issue with aligning the two list items with the background images

I fixed every issue too :confused::confused::confused:

Apologies for the bump, but despite all of my efforts I am STILL having the exact same issue with aligning the two list items with the background images

I fixed every issue too :confused::confused::confused:

something is wrong, you still have invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.buckeyeakpsi.com%2F

it's a guess:

<ul style="position: absolute; left: 200px; top: 170px;" class="top">

remove the yellow parts

and probably you want to reduce this value to about 150px.

ul.top {
left:200px;
list-style-type:none;
margin:0pt;
padding:0pt;
position:absolute;
top:164px;
}

I hope this help.

best regards

Without a Doctype and the initial

* {
margin: 0;
padding: 0;
border: none;
}


It is impossible to get it right.

You need to use these and then re-position the menu to where it should be.
Any other course of action will lead to it being right in one browser and wrong in others.

Frank

I probably should've mentioned that the test link is now

http://www.buckeyeakpsi.com/tsb55.html

You still do not have this

* {
margin: 0;
padding: 0;
}


at the START of your CSS.

Frank

You still do not have this

* {
margin: 0;
padding: 0;
}


at the START of your CSS.

Frank
Ok, I added this and it DID make a difference to some of the worsening alignment issues that had occured because of the error check, but i'm now back where I started

Ok, I added this and it DID make a difference to some of the worsening alignment issues that had occured because of the error check, but i'm now back where I started

you don't need to add a div like this:

<div class="*">
..


the "*" from:

* { margin: 0; padding: 0; }


means "any element". Remove/rename the class or div if you don't need it.

I'm not sure that I could help you if you fix the markup errors, but this errors make me imposible to see what's wrong.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.buckeyeakpsi.com%2Ftsb55.html

the solution from my previous post work for original link, with all validation error, I test it. On this new link I see you make many changes. Try to don't add unnecessary markup css and/or html if you don't need it because this make hard to find and fix the problem.

best regards

Ok, I added this and it DID make a difference to some of the worsening alignment issues that had occured because of the error check, but i'm now back where I started

put in the header of your html file this:

<link rel="stylesheet" type="text/css" href="k0.css"/>
<link rel="stylesheet" type="text/css" href="k1.css"/>


and remove both style declaration from it

put in the same directory with your html file this two files:

k0.css:

* {
margin: 0;
padding: 0;
}
div.container
{
background-image: url(img/lbg.gif);
background-attachment: scroll;
background-repeat: repeat-y;
clear: both;
margin: 0px;
padding: 0px;
}
div.footer
{
color:white;
background-color:#FFFFFF;
background-image: url(img/lfooter.gif);
height: 50px;
width: 800px;
margin: 0px;
padding: 0px;
}
div.header
{
height: 192px;
width: 800px;
margin: 0px;
padding: 0px;
background-image: url(img/lheader.gif);
}
div.left
{
float:left;
width:75px;
clear: left;
}
div.content
{
width: 600px;
margin-left: 125px;
float: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div.top
{
width: 478px;
position: absolute;
left: 151px;
top: 130px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFFFFF;
}
ul.top
{
padding:0;
margin:0;
list-style-type:none;
position: absolute;
left: 200px;
top: 164px;
}
ul.bottom
{
padding:0;
margin:0;
list-style-type:none;
position: absolute;
left: 199px;
top: 184px;
width: 450px;
}
ul.members
{
padding:0;
margin:0;
list-style-type:none;
position: absolute;
left: 622px;
top: 62px;
}
a
{
text-decoration:none;
color:#FFFFFF;
padding-right: 15px;
padding-left: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
a:hover {
color: #999999;
}
li {display:inline}
li.MsoNormal
{mso-style-parent:"";
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";
margin-left:0in; margin-right:0in; margin-top:0in}


k1.css:

p.c7 {line-height: 150%; text-align: center}
table.c6 {font-family: 'PrimaSans BT',Verdana,sans-serif; font-size: x-small}
span.c5 {font-family: PrimaSans BT,Verdana,sans-serif}
span.c4 {color: mediumblue; font-family: arial,helvetica,sans-serif; font-size: 150%}
p.c3 {text-align: center}
h1.c2 {color: #0000CD; font-family: arial,helvetica,sans-serif; text-align: center}
ul.c1 {
position: absolute;
left: 199px;
top: 162px;
width: 445px;
height: 11px;
}


this will not fix the problem, but will fix few of the validation errors.
After you finish, post the results.

best regards

Ok, I cleaned it up and it passed validation, STILL having problems with FireFox

there is also css errors
Warning: Unknown property 'mso-style-parent'. Declaration dropped.
Source File: http://www.buckeyeakpsi.com/tsb55.html
Line: 110
unless its an IE hack.
also two warnings
65 Same colors for color and background-color in two contexts div.footer and div.top
99 Same colors for color and background-color in two contexts div.footer and a

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.buckeyeakpsi.com%2Ftsb55.html&profile=css21&usermedium=all&warning=1&lang=en

Ok, I cleaned it up and it passed validation, STILL having problems with FireFox
excelent, :)

ul.top {
height:10px;
left:192px;
list-style-type:none;
margin:0pt;
padding:0pt;
position:absolute;
top:163px;
}
changing the values for the left and top, change the menu position, for example for me work with left 140px and top 155px.

Tidy make a good work, :) But you also must clean up the css error:


li.MsoNormal
{mso-style-parent:"";
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";
margin-left:0in; margin-right:0in; margin-top:0in}


I hope this help.

regards

I guess ultimately my question is what would cause the offsetting issue between two browsers.

Since the "Members" link is placed in the same way on both browsers it SHOULD work with the rest of the list links.

Can anyone figure out WHAT would cause this?

fcrock, what happened to your site http://www.buckeyeakpsi.com/ ?