[Solved] Webkit or other fix for a cross-browser margin and/or padding issue?

[Anonymous]

Greetings,

I’m having a problem with getting a uniform look in Chrome and Firefox. Specifically, the small 1px “separation” between the navigation bar and the border at the bottom of the pages. See illustration here. This also causes the page to be 1px shorter in Chrome than in Firefox. I believe it is due to

.scroller{
   margin:0 0 0 11px; 
   padding:1px 0 0 5px;
   line-height:1.4;
   height:516px;
}

I’ve adjusted the upper and lower margin, the upper and lower padding, and adjusted the scroller height, but nothing helps, or causes a 2px line at the bottom in FF. A working test page is here.

Is there a Webkit fix, a hack, pseudo element, or something/anything that will make this appear the same in Chrome as it does in FF?

Thanks!

BTW, I know the up and down arrow buttons aren’t showing. This is just a test page and I didn’t set those to function here.

[Anonymous]

Greetings Soronbe,

Thanks for your reply. I should have specified I want a 1px line at the top and bottom, not remove them. My apologies.

Best Regards.

[Anonymous]

Greetings gcyrillus,

I corrected the errors and appreciate you pointing them out. They didn’t have any effect on issue however. I have made the following changes:

#content {
    width:754px;
    padding:0 0 1px 0;
    display:table-cell;
    vertical-align:bottom;
}

.scroller{
   margin:0 0 0 11px; 
   padding:1px 0 0 5px;
   line-height:1.4;
   height:515px;
}

nav {
    width:753px;
    margin:0 0 0 1px;
    position:relative;
    z-index:1;
    background:#000000;
    text-align:center;
}

Which has brought me closer to what I want, but there are new issues.

1) The header is now shifted down in FF and IE.
2) 2) my scroll buttons are not showing in Chrome and only the up button is showing in IE.

I added a height value to the #content { hoping that would help matters with putting a 1px line at the top and bottom on all browsers and having the header at the top, but it didn’t.

I am really at a loss on this.

Best Regards.

[Anonymous]

Greetings Atelierbram,

That (removing the stray ) seems to bring it closer to what I want across the browsers. The down arrow is still not showing in IE though. I had this problem in the very beginning but don’t recall what the danged issue was!

Regarding fluidity: Yes, I am aware there are issues with the pages. My target audiences are desktop and tablet users. I am aware that the pages aren’t responsive on some inner elements and the navigation bar has issues as well. I am looking to receiving suggestions/help in rectifying these issues as well.

I had little knowledge of CSS one year ago and only approached it in a “have to” situation because HTML and JS just doesn’t stand alone for web site construction anymore. I came here one year ago seeking to learn CSS then was introduced to PHP, and have been trying to digest all of that while balancing my business and personal issues. I’ve not been able to fully appreciate any of it having far too much to do and so little time to do it all. I’m in a mad dash to get the new web site out of the way, (only 5 or 6 things to go that I haven’t much knowledge about how to fix) and a few personal matters, then I can come here and fully absorb what is here.

I truly appreciate your reply and your suggestions.

Best Regards.

[Anonymous]

This has been figured out.

[Author]

Posts