4 replies [Last post]
bowe
bowe's picture
Offline
newbie
Sweden
Last seen: 12 years 10 weeks ago
Sweden
Timezone: GMT+1
Joined: 2010-03-10
Posts: 2
Points: 3

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? Smile

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>

bowe
bowe's picture
Offline
newbie
Sweden
Last seen: 12 years 10 weeks ago
Sweden
Timezone: GMT+1
Joined: 2010-03-10
Posts: 2
Points: 3

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?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 44 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Have you tried it?

Have you tried it?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Proof of the pudding...

Proof of the pudding...

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hm

Mysterious gap under images.

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.

I'm no expert, but I fake one on teh Internets