Wed, 2010-03-10 15:40
I am trying to do a fanpage on Facebook without any java and keep it FBML-compatible (i.e. a number of HTML tags are not allowed). I am a newbe but I have tried all resources I could find before asking here. Hope you can help me. Will csscreator.com be my new home? 
What I am basically trying to do is a layout with, from top to bottom
1. Header (full width)
2. Image for padding (full width)
3. Navigation column + main area
4. Image for padding (full width)
5. Three clickable images
First I tried to FLOAT the DIV's left and it looked great in Firefox 3.02 but in IE8 there was a space between the objects that were supposed to be on the same row. Because of the space there wasn't enough space in the containing DIV so the last object was shifted one "row" down. When i widened the DIV they ended up on the same row but with vertical padding between the objects. I have added float:left and clear:both to get rid the spacing below a DIV that occured in IE8 (found this on another forum).
Eager not to give up I tried to absoulte position the objects, which again looked fine in Firefox but in IE8 they were a mess. The vertical positioning was random with extra space (it looked like the positioning was not absolute but relative to the DIV's).
I would be grateful for any hints and tips. Please keep it simple and if possible step by step.
/Bowe
Anyway, here is my code (some tags like BODY removed due to FBML limitations)
float:left; clear:both; } #Container { float: left; width: 750px; margin: 0; } #Header { float: left; width: 750px; margin: 0; } #Divider_Up { float: left; width: 750px; margin: 0;} #Main { float: left; width: 750px; margin: 0; } #Navigation { float: left; width: 150px; height: 324px; margin: 0; background-color: black #Huvudbild { float: left; width: 600px; margin: 0; } #Divider_Down { float: left; width: 750px; margin: 0;} #Lower_Nav { float: left; width: 750px; margin: 0; } #Lower_Nav_1 { float: left; margin: 0; width: 250px; } #Lower_Nav_2 { float: left; margin: 0; width: 250px; } #Lower_Nav_3 { float: left; margin: 0; width: 250px; } </style> <div id="Container"> <div id="Header"> <img src="Images/Banner.jpg" width="750" height="100" /> </div> <div id="Divider_Up"> <img src="Images/Transfer_Upper.jpg" width="750" height="25" /> </div> <div id="Main"> <div id="Navigation"> <A HREF="http://www.sunet.se"> <img src="Images/Wall.jpg" border="0" width="128" height="30" style="position:absolute; top: 135px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="Images/Photos.jpg" border="0" width="128" height="30" style="position:absolute; top: 180px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="Images/Video.jpg" border="0" width="128" height="30" style="position:absolute; top: 225px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="Images/Results.jpg" border="0" width="128" height="30" style="position:absolute; top: 270px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="Images/TheCar.jpg" border="0" width="128" height="30" style="position:absolute; top: 315px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="Images/Sponsors.jpg" border="0" width="128" height="30" style="position:absolute; top: 360px; left: 20px; z-index:1; } "/> </A> <A HREF="http://www.sunet.se"> <img src="../images/TheTeam.jpg" border="0" width="128" height="30" style="position:absolute; top: 405px; left: 20px; z-index:1; } "/> </A> </div> <div id="Huvudbild"> <img src="Images/Facebook_bilder/Macke vid bil.jpg" width="600" height="324" > </div> </div> <div id="Divider_Down"> <img src="Images/Transfer.jpg" width="750" height="25" /> </div> <div id="Lower_Nav"> <div id="Lower_Nav_1"> <a href="http://www.facebook.com/pages/TestBowe/264709525801?v=app_10531514314"> <img src="Images/Shop icon kasse o tshirt.jpg" border="0" width="250" height="277" /></a> </div> <div id="Lower_Nav_2"> <img src="Images/Facebook_bilder/Gold Fan.jpg" border="0" width="250" height="277" /> </div> <div id="Lower_Nav_3"> <img src="Images/Ask Marcus.jpg" border="0" width="250" height="277" /> </div> </div> </div>
Wed, 2010-03-10 20:52
#1
Is this the simple but annoying solution?
After visiting another 200 web pages I stumbled on something...
Can somebody please confirm that using this:
<div> <img src="image1.jpg"/><img src="image1.jpg"/></div>
instead of this:
<div> <img src="image1.jpg"/> <img src="image1.jpg"/> </div>
will solve the problem of IE white out?
Thu, 2010-03-11 09:57
#2
Have you tried it?
Have you tried it?
Thu, 2010-03-11 10:01
#3
Proof of the pudding...
Proof of the pudding...
Thu, 2010-03-11 13:35
#4
Hm
Mostly they're mysterious because it gets transferred to the boxes holding them, so it looks like it's not from the images at all but somehow from the containers.
img { vertical-align: bottom; }
is one of my dearest friends.
The code you probably ran into regarding no newlines is likely a different IE whitespace bug.