17 replies [Last post]
larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Hello there.

I am stuck! I am currently working on the top section/navigation of a page, and the problem is that the secondary line of navigation lines up differently (vertically speaking) in IE and in Mozilla. It should not.

File locations:

[url] http://www.foxowl.com/index7.html [/url]

(CSS file is here: [url] http://www.foxowl.com/include/foxowl3.css [/url])

I have been trying to read about the "3px differences", and have searched the Internet only to find a very large number of complicated hacks that were over my head.

I'm hoping that someone here can:

#1) Explain what's going on/why
#2) Explain in simple, easy-to-understand English how I can go about fixing my problem

I'm looking forward to learning from all of the wise people here! Thank you so very very much! Laughing out loud

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text lines up differently in IE & Mozilla - help, please

I think you mean the 3px jog, which occurs when text is next to a floated object. But you do not have anything floated.

I think the problem is your use of left, top, etc with a relative positioned divs, for which you can get some strange results, as the div still retains its "space" where it came from. Get rid of that and use margin or padding instead.

Tip: put borders around the divs while you position them to see what is happening.

Regards
Day

The only way to learn is to do it yourself

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE & Mozilla - help, please

Thanks Daybreak, I'll give that a shot.

Oh, and yes, I do put lines around my divs when I'm building with them. How sad that I still can't understand what's going on sometimes even WITH the lines on! =)

Anyhow, I'll test this out tomorrow and report back for everyone.

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

The answer?

Well, I wrapped the 2 navigation divs in their own div and floated it to the left (against the logo) and it all appears to be working nicely now.

I am, however, now having issues of bumping the nav divs to the right a little bit, away from the logo and giving the text space to breathe. Yes, I tried padding-left, margin-left, and left. . . but none of them moved the divs to the left one bit.

Guess I'll keep fiddling. . unless anyone has a suggestion?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text lines up differently in IE & Mozilla - help, please

Can you update your changes so we can see them via the link.

I can't see any reason whay adding a margin-left to the .header-navigation and .sub-nav would not work. Of course it may be - did you remove your left and top attributes?

Regards
Day

The only way to learn is to do it yourself

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

updates

Okay! I just updated the files so you can see what's going on now. I wrapped both nav divs in their own div and floated them left against the logo. . . and it works very nicely!! Of course. . . since I've continued to work on the layout I've run into more (different) roadblocks!

- You'll notice on the that the footer butts up exactly against the bottom of the browser window. I've tried a few different methods of placing some "breathing room" underneath there, but have had no luck.

-I'm having some issues with the 2 photos you see. They're not working very nicely--as you can see, the surrounding text isn't wrapping cleanly around them. Where did I go wrong?

-Last problem: The margins in Mozilla (on the left and right sides where the body text meets up with the outline box) are much, much smaller than in IE. In fact, in Mozilla, the text looks almost like it's squished against the outer box, though in IE the text has space to breathe. Is there a trick to make them seem more even? And would that trick have to do with padding?

So there! Fixed up the top part only to run into new issues as I moved forward. But I suppose that's exactly how making websites works. . . Wink

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text lines up differently in IE & Mozilla - help, please

1) Try
To the #body-container you could change the following
margin: 8px auto 8px -387px;

or add to body
margin: 0px 0px 8px 0px;

2) I was confused by this one, In IE it looked fine, but not in FB and I could not see why. It seems that that FB has a problem with your div interupting the <p> tag, and makes allowances by forcing the remaining text to the next line under, as if it is a new <p> tag.

I was able to fix it by giving <p> no margin or padding (0px), although in the end I used this

p.surround {display: inline;}

and then for the beginning <p> above the image I had <p class="surround"> Of course you can call it anything you want.

3) Yes can see it, but it seems to be a definition problem of pixel width. Huh how could that be! I set the left margin to 1px on your leftcontent div and then a few more up to 15px that you had, and IE appears to have about double what FB has. I do not know what is causing it, and think this comes under how perfect do you want to be when you have cross browser compatibility problems! At least most of the clients will probably use IE.

You could add a hack that only FB can see and increase the margin.

Regards
Day

The only way to learn is to do it yourself

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

Daybreak, I tried both your methods for adding a bit of "breather" space at the bottom of my browser window. Neither worked. =( I've also 3 other very smart css people. . . and they're stumped too!! I can't for the life of me figure out why this is so complicated. One guy even said it was not possible. I've tried every hack and have worked on this for a solid 4 hours. But I've got nothing!

Can anyone explain how I might go about getting a bit of breather space at the bottom of my browser window, just like I have at the top??? (8px worth)

THANKS!!

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

I've never actually seen this accomplished. Here are some possible solutions.

1. If you have photoshop or some other graphic program then what I'd do is create an image that fits along with the background pattern and is 8px high. Then you place that at the bottom. (problem - the background moves)

2. Create a spacer div and put it outside the bottom of the "body-container". Just give the div the attributes you need and this might work. If the div does not remain a certain height (8px) then I would create a spacer image and place it in there, then if need be you can set the filter of the div to 0% opacity and you have a perfect transparent bottom "breather".

I would try option 2 probably

http//mark.axsysdesign.com

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

Thanks for the suggestions Mark.

1. Unfortunately, with a patterned background, you're right--this can't work cleanly because each page has a different length meaning the pattern won't line up consistently.

2. This unfortunately doesn't work either. When I place a spacer div with anything at all in it, the page renders with the div placed up in the header. This happens even if I place the div right next to the closing /html tag. This is (I'm guessing) occurring because of the absolute positioning of the header, body, and footer divs.

Augh! That's a total of FOUR people now saying it "cannot be done." Is there someone out there that can prove this wrong? Please?

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

That stinks...I didn't see the absolute positionings...

Can you attempt to do this without absolute positionings? Because those things are killer when it comes to situations like these...In fact I do believe that it is impossible...

http//mark.axsysdesign.com

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

Arugh. Impossible?? Surely nothing is in this day of tricks and hacks?

Yeah, you're right, it stinks.

I only used absolute positioning because I was under the impression that that was the "preferred/best" way of centering the content of your site in the center of a browser window . . . . . . . .

Arrrggh.

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

Absolute positioning is best used on small sized sites that don't depend on expandability, functionality, or sizing/stretching. Definitely not the preferred way of centering. There are the rare occasions where they can work to your advantage, but in this case I'd say ditch them and go back to the drawing board. I'm 99.9% sure that there is no solution to this problem...

http//mark.axsysdesign.com

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

Thanks for your help, Mark.
You just gave me a new idea. . . .
We'll see.

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

You're welcome...if you need any more help with anything just holler.

http//mark.axsysdesign.com

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

I will have more to post in a few days. . .

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

ahh sorry "absolutely positioned", hits me over head.

here

BODY {
	margin:0px 0px 20px 0px;
	padding:0;
    background-image : url("../images/bg-pattern.gif");
}

#wrapper {
	position : absolute;
	display : block;
	left : 50%;
	margin: 0px auto 0px -387px;
	width : 777px;
}

.body-container {
	position : relative;
	margin: 0px 0px 8px 0px;
	width : 775px;
	border-left : solid 1px black; 
	border-right : solid 1px black;  
    background-image : url("../images/2tonebg.gif");
	background-position : left top;
	background-repeat : repeat-y;
	font-family : Arial, Helvetica, sans-serif;
	font-size : .91em;
}

/*  ---- PAGE HEADER ----- */


/* ---- the bg holder is to take care of the problem with getting the 2 color columns lined up perfectly  ----*/
.header-container {
	position : relative;
	margin: 8px 0px 0px 0px;
	width : 775px;
	border-top : solid 1px black; 
	border-left : solid 1px black; 
	border-right : solid 1px black; 	
    background-image : url("../images/bg.jpg");
	background-position : left top;
	background-repeat : repeat-y;
	font-family : Arial, Helvetica, sans-serif;
	font-size : .91em;
}

Instead of absolutely positioning the two blocks, I created a wrapper that in the body surrounds all, which is the centering div, which means the other two blocks (header and content) are not absolutely positioned and therefore bottom margin will work.

looked ok in IE, but not displaying properly in FB, but can't be sure if that is because I don't have the images, and IE is much better at maintaining the space for the missing image. I leave that to you to look at.

BTW - there is another method for centering where position absolute is not required

body { 
text-align: center;  /*needed for IE*/ 
} 

#wrapper { 
margin-left: auto; /*correct centering*/ 
margin-right:auto; /*correct centering*/ 
text-align:left; /*reverse text center needed for IE*/ 
width: 700px} /*width of everything in middle - Required in px*/ 

but width in PX is required.

Regards
Day

The only way to learn is to do it yourself

larn
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2004-01-11
Posts: 24
Points: 0

Text lines up differently in IE &amp; Mozilla - help, please

thanks daybreak!
I'll be giving everyone's suggestions a shot tomorrow.
Everyone's been so helpful. . . .

Laughing out loud

Suuuuper grateful,

-larn