Page not displaying properly in FF3

Discussion in 'HTML & Website Design' started by sidious1990, Jun 29, 2009.

0
  1. #1
    I've recently redesigned my homepage but for some reason it wont display properly in FF3, it works fine in IE8, so I dont know what the problem is.

    Here is the page in question: http://www.gametryout.com/index2.php

    and relevent CSS code:

    #flashSlider {
	background: #666666;
	width: 491px;
	height: 274px;
	float: left;
	margin-left: 15px;
}

#newsBody {
	background: url(images_homepagenew/content.gif);
	width: 290px;
	height: 274px;
	float: right;
	margin-right: 15px;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
    Code (markup):
    Despite having a left margin the flash slider seems to just stay stuck next to the left hand side of the page.

    The container that these two sit in is 845px wide so there is definately enough space for them to sit next to each other.

    Any help would be much appreacited.
     
    sidious1990, Jun 29, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    In #tier2, you have 'text-align:left'. Firefox is obeying that while IE is not.
     
    drhowarddrfine, Jun 29, 2009 IP
  3. sidious1990

    sidious1990 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well I've removed the 'text-align: left' from tier 2 and nothing has changed.

    Intrestingly, setting IE8 to 'compatibility view' reproduces the same problem as firefox.

    what do I need to do to get it to work?

    thanks for all the help so far by the way:)
     
    sidious1990, Jun 30, 2009 IP
  4. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #4
    Just thought I'd mention that your site isn't sitting right in IE7 either. Consdering that less than 6% of the population has upgraded to IE8, and almost 50% is on FF... you should be working in firefox to get your code right.

    You might want to put the newsBody div before the Flash div in your HTML.
    Another thing to try (works in IE8 & FF) is using the display: table-cell CSS property.
    It acts like table coding used to. Won't work with IE7 or earlier though.

    Good luck
     
    xira, Jun 30, 2009 IP
  5. sidious1990

    sidious1990 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That worked great thanks (moving the newsBody div before the flashSlider one).

    Out of interest, why was that the problem? Surely it should work the way I had it before?

    Also, how can I get the flash applet to move away from the left edge of the container? I have a left margin but it doesnt seem to do anything.
     
    sidious1990, Jun 30, 2009 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #6
    Then you have more problems than just this because it DOES change.
    [/quote]
    Intrestingly, setting IE8 to 'compatibility view' reproduces the same problem as firefox.[/quote]IE is of no value when debugging a site. Always, always use a modern browser (anything but IE). Then we can hack IE to make it work.

    Right now, IE8 may be showing what you want. Firefox is showing what you wrote.

    You have one CSS error.
     
    drhowarddrfine, Jun 30, 2009 IP
  7. sidious1990

    sidious1990 Peon

    Messages:
    99
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It only changed when I implemented what xira wrote, thats what fixed my problem, nothing to do with the text alignment.

    Which is?

    Lastly, I still havent managed to move the flash slider over despite it having a 15px margin
     
    sidious1990, Jun 30, 2009 IP