Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IMG not lining up in FF 1

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Why am I getting the following problem lining up the image?



css =
Code: 
/************* Global *************/
* {
margin: 0; 
padding: 0;
}

body {
font: 90%/100% Comic Sans MS, helvetica, Tahoma, Verdana, Arial, sans-serif;
background: #5b5b5b;
color: #e6e6e6;
}


a {
color: white;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

a:hover {
color: #787878;
}

blockquote {
padding: 0.1em 0.3em;
color: #9b9b9b;
}

/************* Container *************/
#wrapper {
width: 518px;
margin: 0 auto;
text-align: left;
}

/************* Header *************/
#header {
margin-top: 0px;
height:222px;
width: 518px;
background: url(images/header.jpg) no-repeat;
}
 
#insideHeader {
width: 450px;
height: 90px;
margin: 0 auto;
padding: 35px 27px 25px 33px;
}

html>body #insideHeader {
padding-top: 32px;
height: 104px;
}

#donkey {
width: 443px;
height: 99px; 
background: url(images/donkey2.gif) no-repeat;
}

#donkey p , #pig p{
margin: 20px 5px 10px 45px;
text-align:right;
color:#2B2B2B;
font-size: 0.80em;
}


XHTML =
Code: 
<body>
	<div id="wrapper" >
		<div id="header">
			<div id="insideHeader">
				<div id="donkey">
				    <p>Dazed and confused trying to find the right mortgage?
				    <br />Require insurance but don't know where to turn?
				    <br />Need a loan for that special purchase?
				    <br />We can help!</p>
				</div>
			</div>
			<div id="menu">
 				<ul>
					<li><a href="/">Home Page</a></li>
					<li><a href="about.html">About Us</a></li>
					<li><a href="advice.html">Get Advice</a></li>
					<li><a href="legal.html">Legal &amp; Privacy</a></li>
				</ul> 
	
			</div>
		</div>
		<div id="main">
			<div id="content">

what's odd is the text in the <p> is in the same place in both browsers, so shouldn't the image be?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
no change!

I've found this is effecting it in FF but not IE
Code: 
html>body #insideHeader {
padding-top: 32px;
height: 104px;
}

All i did is change it to padding-top:16px; and the image lines up, though the text doesn't and the menu is too close to the image.

what is that code doing and why is it not effecting IE.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
great - back to the CSS drawing board!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
it's a free template i'm using to write 100% CSS and XHTML1.1 , so i admit some is Cargo Cult programming, what's new to those that know me :p

ok I drew some borders as a guide to understand what was going on


I found this code had different effects in IE to FF
Code: 
#donkey p , #pig p{
margin: 20px 5px 10px 45px;
text-align:right;
color:#2B2B2B;
font-size: 0.80em;
the margin code in FF was doing the following...

notice the gap between the green border and the image!
which was giving the <p> tag a margin, which I understand to be the gap from the OUTSIDE of the element, once changed to padding, it looked the same as IE, and the effect I was tring to achieve.

so am i to take it that margin in IE acts like padding , I have to assume IE doesn't handle margin and padding correctly or is there some other explination, because this margin, even if i meant to use padding was affecting the image, yet it is applied to the <p> tag, why was it being applied to the image? when the image (#donkey) has this CSS
Code: 
#donkey {
width: 443px;
height: 99px; 
background: url(images/donkey2.gif) no-repeat;
}

So i don't understand why the margin was effecting the #donkey , when it's on the #donkey p


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
all browsers unfortunately provide different default styles to elements.

try something like this:

Code: 
#donkey p , #pig p{
   margin: 20px 5px 10px 45px;
   [red]padding: 0;[/red]
   text-align:right;
   color:#2B2B2B;
   font-size: 0.80em;
}



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I don't know about collapsible margins, but I do know IE is behaving as expected but FF & OPERA isnt!

I found all the margins set correctly looked like this is I.E.

everything a-ok, however in FF and O it looked like this...


however if I placed a border on the div's it then aligned correctly in FF & O like this...


therefore I have to conclude that IE is working and FF & O isn't as IE correctly see's the boundries of the block div's and places the margins correctly around them, where as the others don't treat the divs as having 'hard edges' unless you place a physical border on them (which isn't wanted!), I did find when googling that you could place a border-color:transparent; to get round this problem, only the border still shows in I.E!

in the end I removed some div's and rewrote including the css to use padding on the elements as margin only seems to work in IE.

so now I have...
Code: 
/************* Container *************/
#wrapper {
width: 530px;
margin: 0 auto;
text-align: left;
}
/************* Header *************/
#header {
width: 518px;
height: 185px;
background: url(images/header.jpg) no-repeat;
padding: 36px 0px 0px 37px;

}
 
#ram {
width: 443px;
height: 99px; 
background: url(images/ram2.gif) no-repeat;
}
and ....
Code: 
<div id="wrapper" >
		<div id="header">
			<div id="ram">
				    <p>Dazed and confused trying to find the right mortgage?
				    <br />Require insurance but don't know where to turn?
				    <br />Need a loan for that special purchase?
				    <br />We can help!</p>
			</div>
			<div id="menu">
 				<ul>
					<li><a href="/">Home Page</a></li>
					<li><a href="about.html">About Us</a></li>
					<li><a href="advice.html">Get Advice</a></li>
					<li><a href="legal.html">Legal &amp; Privacy</a></li>
				</ul> 
			</div>
		</div>
which in someways is good as i've lost 2 divs and as you've said before don't use elements for the sake of it! but I am confused as to why FF & O collapse the margins the way they do, I can't see how that would be either desirable or standards compliant!

Now I have an issue of 'whitespace' between two divs in FF & O yet once again IE seems to be my friend! I have *{margin:0; padding:0;} at the top of the CSS, which should mean apply ZERO to everything to remove default broswer formatting but it only seems to be working in IE, any ideas how to remove the gap between 2 divs?...

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Ugh, did you read the link I provided? It was on the words 'collapsible margins'. That explains:

1. Why is that standards compliant (because standards have defined this behaviour to be like that);
2. why does it happen;
3. and an array of solutions you can use to fix it.

Getting rid of the superfluous divs is good, but raising your hands over nicely explained (if somewhat strange and unusual) behaviour is not.

As for the gap between both divs, we would really need to see the actual page to advise you on that. I myself am somewhat bothered at the fact that #ram has a set height. Do you really want to make it only 99px high regardless of the content in it?
 
Upvote 0 Downvote
lol - yes it is strange and unusual behaviour, not what I expected or wanted, just goes to show that compliants doesn't always mean desirable! - why on earth the standards would be to ignore margins is beyond me, and why does adding a border then make it adhere the margins again to me is odd, oh well I guess mine is not to reason why!

#ram is fixed to the height of the image used as the background, why do you seem bothered at that? I especially want the content to adhere to that height, is this not correct to do this when trying to constain the content to fit the size of bg image and thus then use padding to align the content withing the bg image?

the url to the page is

you will notice the difference in spacing between the #header & #content divs differ depending on what browser you view them in. IE is giving the desired results, how to I make FF & O acheive the same.

thanks 1DMF





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
as an aside - your page becomes nearly impossible to read when i increase the size of the text. the caption in the header is unreadable, as are the bulleted lists down further.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
so what's the solution? , I take using fixed font sizes only works for the resolution the site is designed for, how do you scale fonts acordingly

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
how do you do that? is there an auto setting you can place to override default in these circumstances?, i.e. i want a size of X by Y but autofit if font changed?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
783
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
731
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
171
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top