2 small probs left (re: impossible layout)

[kasha]

Hi everyone,

Some may remember me with my questions about this layout. Well its really progressed (shout outs to Centauri and WebJoel) with 2 small issues remaining:

It's here: http://x-gr.net/stix/

1) Internet vs. Firefox spacing issue

Above the paintings, do you see the bar where it says 'News news news' - well firefox has a bigger space above that than IE7. I've tried all kinds of fixes to do with margins, padding and image properties. Any ideas?

2) Hovering effects with buttons. To the right of the paintings there are three buttons on top of eachother. When one of them is pressed, they want the button at the bottom (the one with my message) to change color.

Can I do this with CSS? I remember back when we did this with clunky javascript.

Also would someone tell me please how this looks in IE6? I have IE7 installed and haven't worked out how to have both.

Thanks for any advice.

[WebJoel]

I can't seem to be able to get your page to work in my desktop, -it is probably some charset discrepancy fault on my end.. anyway:

#scroll {
margin-top: 4px;
height: 19px;
padding-top: 4px;
background-color: #5b8a95;
padding-left: 12px;
line-height:1.2em;
} I would play around here, see if you could get the text to 'fill' the #scroll without the use of padding. "line-height" would probably work.
I'm at a loss why "margin-top:4px" is being at issue here, -but you're right, I do see a change fron IE to Fx. Perhaps if "line-height" were implicit, this would change as most 'line of text' as in "line-height" would be at least 20px to 22px tall.

Again though... since I cannot view the problem in my editor, this is just a guess and what I would try.. :o

In the screenshot image, the 'image' is about 2px less-tall than the container... here can be tweaked as well... (notice the white line on the bottom of the image..)

2nd part (view in IE6) : browsershot.org image: attached

[Centauri]

1) Is due to space assigned below inline elements for text decenders - images are normally aligned to the text baseline, and changing this to align to the bottom of the text box will close up the gap :body img {
border: 0px;
margin: 0px;
vertical-align: bottom;
}

2) You already have "clunky" javascript doing the rollover.. :) Are these buttons to be linked to other pages?, and what is the purpose of the lower button where the colour change is to happen - is there to be content there, or a link, or other information depending on the top button selected etc?

3) IE6 has an issue and is due to an incorrect value of left margin on #rightside - the * html hack for IE6 to fix the 3px jog bug needs the margin to be 3px less than normal :#rightside {
margin-left: 225px;
padding-left: 5px;
background-color: #FFFFFF;
width: 775px;
}
* html #rightside {
margin-left: 222px;
height: 1%;
}

[kasha]

thanks for the hacks, they worked.

no thanks for the IE6 screenshot. looks horrid! wierd thing going on at the bottom there, that menu with the 'Selected Highlight' - right borders are getting cut off in IE6. Any idea why this ridiculous browser would do that?

[kasha]

Fixed that border problem.

Been trying for two hours to get rid of the scrollbars when viewing this in 1024*768 without any luck...any ideas would be most welcome!

[Centauri]

Interesting - while I have been looking at this, you have been playing with widths, and it looks like you found the total width of the contents of #bottomnavimages added up to 776px and have adjusted the width of .last accordingly. Looks good in IE6.

[Centauri]

If you have been relying on the browsershots site to display in 1024x768, then the horizontal scrollbar is caused by this. If the browser is not in full-screen mode, it adds window borders to the window which reduces the width slightly. There is no horizontal scrollbar if the browser is full screen and the screen resolution is 1024x768.

[kasha]

Hey I'm not using browser shots. Do you see a scrollbar? What I do is change my display settings to 1024*768 and I see the scrollbar.

The problem is that the edge of the main part of the template has a 5px white space before the BG continues. The graphic artist doesn't want the BG showing on the right side when viewed in 1024*768.

[Centauri]

Satisfying the conditions here would be next to impossible, as the available width depends on operating system, window theme and browser. On my main PC using Windows XP and "classic" windows styles and Firefox or Opera, there is no horizontal scrollbar at 1024x768, and I can see about 1px of the right background. On the same machine with IE6, there is a horizontal scrollbar due to IE having side borders on it's window. On another machine using a different XP theme, the horizontal scrollbar appears with Firefox due to the wider theme vertical scrollbar, and IE shows a larger horizontal scrollbar. With Linux machines or Macs and different browser combinations, there would probably be wider discrepencies.

Adjusting the width to avoid the horizontal scrollbar whilst not showing the right background for one operating system/theme/browser combination will result in either the horizontal scollbar or visible right background for other system/theme/browser combinations - not much you can do about that.

[WebJoel]

-darn! I wish that I could reproduce this onto my offline HTML-editor! :(
I tried again, -still, just a blank white page! :(

Anyway... I saw this in your CSS and was wondering if this is what is causing what you are calling a '5px gap' to the right-edge of the image as-viewed from your URL* html #sidebar {
margin-right: -3px;
} A negative margin pulls the element 'over itself' by that much, akin to pulling a blanket up over your feet by the stated amount. Well, this is 'pulling' the neighbor (or parent??) element (here, either wrapper, body or html?? whatever) over "#sidebar" by 3px from right-to-left... meaning that if anything to the right of "#sidebar" will also suffer this three-pixel-negative deficit. Seeing that you are using the 'univseral selector' means that this stated '5px gap' isn't due to IE defaults on html, body (and the fact that is also shows on non-IE, as it is IE that abuses defaults margin/padding on HTML, BODY...) ...and I can't test this! :(

[Centauri]

Hey Joel, that negative margin targeted at IE6 is to counteract ie6's 3px jog bug, and needs to be there to prevent content drop in IE6.

The "5px gap" is a right white border put there by design.

[WebJoel]

I wish I could see that. Even if I could get this to work on my desktop, Of IE, I only have IE7 and the '* kluge' is targeting a simpler browser I no longer have but anyway, the *online* site looks great. :D

[kasha]

Satisfying the conditions here would be next to impossible, as the available width depends on operating system, window theme and browser. On my main PC using Windows XP and "classic" windows styles and Firefox or Opera, there is no horizontal scrollbar at 1024x768, and I can see about 1px of the right background. On the same machine with IE6, there is a horizontal scrollbar due to IE having side borders on it's window. On another machine using a different XP theme, the horizontal scrollbar appears with Firefox due to the wider theme vertical scrollbar, and IE shows a larger horizontal scrollbar. With Linux machines or Macs and different browser combinations, there would probably be wider discrepencies.

Adjusting the width to avoid the horizontal scrollbar whilst not showing the right background for one operating system/theme/browser combination will result in either the horizontal scollbar or visible right background for other system/theme/browser combinations - not much you can do about that.

Thanks for the explanation. The graphic artist who made this layout doesnt do HTML/CSS so we have some design issues like this one AND check this out:

http://x-gr.net/stix/1b.html

Those narrow columns! Her layout was made in Photoshop and she has hyphenation so was able to make the text in those boxes bigger but if she knew CSS she never would have done that. I guess there's not way to make it hyphenate eh?

Another issue: try enlarging the text ctrl+1 - the layout screws up a bit. Should I worry about this?

[kasha]

ok, for anyone following this saga, there's no way to make hyphenation work, so now you know!

[Declan1991]

You would have to change basically every measurement from an absolute one to a relative one. Quite a lot of hassle, but it's the most accessible.

[kasha]

You would have to change basically every measurement from an absolute one to a relative one. Quite a lot of hassle, but it's the most accessible.


I guess you're referring to the problem about the ctrl+1, right? Changing all the numerical widths to %s is really difficult with this template I think.

Is this a really big problem? How many people actually adjust their font sizes?

[kasha]

Solution to ctrl+1 problem is to add another div after the body and before the wrapper, and attach the BG image to this div.

[Declan1991]

Well ems work too. You'd be surprised, and I have to say that I occasionally increase the font size just for clarity. It's quite possible that you would never get a user that needed to increase the font size, but if you do, I'd hate to discriminate against someone with bad sight because my own is pretty bad.

I also find that on a large screen that I move back and increase the font size (especially if the site is designed for 1024*768 (I can't think if that's right or not).