5 replies [Last post]
mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Hi everyone.

I'm sure this question (or one like it) has been asked before in these forums many times, but search as i might...can i bugger find the answer!! so you'll have to forgive my ignorance for code (i'm just learning really)

Here's the site that i'm having problems with
http://www.madewithpixels.co.uk (its not quite finished yet still a bit of design tweaking and content to do)

i designed the site around I.E and the concept was to push the boat out with HTML and go for a real design led approach but stick closely to W3C validation, cross browser support, pure HTML etc (no flash basically)...

anyway, the typography that makes up the main navigation in the top frame is an important feature of the design but to make it work for every image that appears there (try the 'next image' link or the folio pages) i had to add a strip of 'black' to the image so that the text is legible.

as i designed it around IE it displays fine, but in Mozilla the black strip is not aligned properly (its about 5 pixels too low - or the text is 5 pixels too high)

im sure the answers really simple so id be really grateful if someone could help me clear this last little hurdle on my way to html nirvana!!

.css file attached

cheers v much

Mike[/url]

www.madewithpixels.co.uk
design | graphics | multimedia

Babyyoursofine
Babyyoursofine's picture
Offline
newbie
Australia
Last seen: 17 years 11 weeks ago
Australia
Timezone: GMT+10
Joined: 2004-09-11
Posts: 1
Points: 0

Your webby thingy :-)

I'm new to CSS but viewing your html source and your stylesheet plus your background image gives me some insight ... I viewed it in IE 6, Mozilla Firefox and Opera 7.54 and I see what you mean about the text not sitting nicely over the black ... your main background image has the black on it and you are trying to align text to an image ... not a good idea ... text over an image always has problems as parts of it get lost in the image ... have you thought of using a "Header" that can contain text and an image ... also why frames and tables ... isn't the point of CSS to simplify thingys?? I'm not trying to be critical I like most of the layout except for that main image you are having problems with. You can use CSS to add a background colour to a single word or a whole block of text. I found this site very helpful http://www.yourhtmlsource.com/directory/stylesheets.html
Hope this helps
*HUGZ*

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Text alignment problems from IE to Mozilla / Firefox

Hi mickieluv,
I think Babyyoursofine is on the right track.
instead of adding the background to the image just give the links a background-color.
You can set the display value of the link to block if you want to make them a consistent size and add padding.

Hope that helps

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Text alignment problems from IE to Mozilla / Firefox

Thanks guys... i was in fact considering doing exactly that, putting the black as a background colour to the text itself, but id like to find the root of the problem before resorting to that ... as it seems like cheating to me! (and... the black is not 100% opaque, whihc would not be possible with a bgcolour)

Babyyoursofine... im not sure what you mean by CSS simplfying things in terms of frames and tables... CSS is simply a way of describing the visual aspects of page layout in terms of fonts / colours etc... i dont think it can be used to simplfy the navigational structure of a website... i used multiple frames in order to provide the functionality i wanted for the site (e.g. the loading of content into certain frames... so as not to have to load the large images that the design is so reliant on)

Your header suggestion would work in terms of the design approach but would not allow me to have consequtive images and links in that particular frame

someone i was talking to today mentioned something about Mozilla / firefox reading CSS in a different order to IE (they said it read bottom to top whereas IE reads top to bottom)

I dunno how true this is.... thought someone here might know something about it.

thanks for your comments, both of you.

Cheers

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Text alignment problems from IE to Mozilla / Firefox

Hi mickieluv,
I've only had a quick look but to me it seems the problem is the box model rendering in quirks mode.

Serach here for "quirks mode" and "box model" and you should find lots of advice.

Hope that helps

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Text alignment problems from IE to Mozilla / Firefox

thanks Tony...

you've completely blinded me with science!! (showing my ignorance again) but i'll follow your advice and have a search for the terms you mention.

cheers v much

[edit]

ok... i did a search and came up with this little gem:

from thread:http://www.csscreator.com/css-forum/ftopic4548.html&highlight=quirks+mode

"After browsing the markup of several CSS gurus including simplebits.com, I've come to the realization that you simply can't employ left or right margin settings with a floating div and expect cross-browser compatibility. Instead, you must add in an extra container div around the floating div you are attempting to position, and set the padding of the container div to taste. This should guarantee IE6(strict) and Netscape 7 will render the box model identically"

now if im not mistaken, that is the root of my problem, but as i dont understand a bloody word of it im starting to feel even more like that amatuer i really am!!!

can anyone explain that sentence to me in plain english? or perhaps give me an example using my code??? im so close, yet so far away!

cheers everyone for your help

www.madewithpixels.co.uk
design | graphics | multimedia