[RESOLVED] Links Not Working...Why?

[banksworld1986]

Hello.

Can anyone tell me why the links are working for the home page in IE and not Mozilla/Firefox?

They are coded the same ....and oddly (:confused:), some of the links in Firefox/Mozilla have the same syntax and they work - but you can't see that because the home page links don't work to access the other pages.

Also, can anyone tell me why on some pages I have so much space to scroll underneath the page and on others I don't? I don't want the scroll to appear unless it has to.

Site: www.ibtestsite.info

[Jeff Mott]

If you use CSS to draw a border around your #firstimg DIV to see exactly where it is, then you'd see that it lays on top of the entire navigation menu, and that's what's causing the problem. The #secondimg DIV is also layered partially on top of the nav menu.

[banksworld1986]

Okay.

I saw that. I then set the images to a specific width and height and the border ( I guess by default ) was then set to the width and height of the image.

But when I did this the border and the image were displaced. I kept the position relative and left and top properties set to 0 - and the image and the border were separate...?.. The border lined up at position 0,0, but the image was 'some' pixels to the right. Any reason for this?

[WebJoel]

Okay.

I saw that. I then set the images to a specific width and height and the border ( I guess by default ) was then set to the width and height of the image.

But when I did this the border and the image were displaced. I kept the position relative and left and top properties set to 0 - and the image and the border were separate...?.. The border lined up at position 0,0, but the image was 'some' pixels to the right. Any reason for this? You know, -every time you do a "position:relative;" with a 'negative' margin-top:foo; you still leave an invisible 'footprint' of the actual spacial dimensions of the positioned element in the natural document flow...#firstimg {
position: relative;
left: 56px;
top: -203px;
}

#secondimg {
position: relative;
left: 534px;
top: -272px;
}

#thirdimg {
position: relative;
left: 446px;
top: -276px;
}

#fourthimg {
position: relative;
left: 534px;
top: -345px;
}and eventually, you will end up with real-estate that is white-space and un-populatable.
"position:relative;" does not actually 'move' an element into a desired position, it merely moves the displayed offset, leaving a, well, 'footprint'...

I also see some elements (DIVs, IMGs) that have, apparently, some problems with their width, thus, creating a horizontal scrollbar on the browser. I outlined their dimensions to show their boundries: see Screenshot image.

[banksworld1986]

"position:relative;" does not actually 'move' an element into a desired position, it merely moves the displayed offset, leaving a, well, 'footprint'...


Aaaaahh....

so it's really best to use the float property.. especially when I have many images that appear within the flow of the document because using top:-px will only create an unnecessary scroll...right?

[WebJoel]

Aaaaahh....

so it's really best to use the float property.. especially when I have many images that appear within the flow of the document because using top:-px will only create an unnecessary scroll...right? Not necessarily a scroll, but the default flow is vertical and 'negative positioning' doesn't change anything except the visual aspect. If the images are required to be aligned to the right, yeah, a "float:right;" would do it so long as you 'clear' the previous float before doing it again, otherwise, the objects/elements/images will form a right-to-left lineup...

If you have trouble with this, I can possibly go through and get it wrangled. I need to be a couple more cups of coffee into myself before I do anything today... :cool:

[banksworld1986]

I need to be a couple more cups of coffee into myself before I do anything today... :cool:


So do I. :D


But I got it from here. Thanks..Once again..valuable info.