SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margins on my page in firefox: different on one machine than another

    I'm running into a strange problem. Just happened to check a page I'm building on a secondary machine I have here and it's not displaying right. It displays fine in ie on both machines, and looks great in firefox on my main machine. But on this other machines, it looks like all the vertical margins collapsed inside of an area where I have a form.

    Here is the page...

    http://www.eyeofjupiter.com/dev/ce/

    All the css is in the head of the file. But the css dealing with the form where the margins are acting up as described are at the very top.

    Here is a screen shot of the way the page is displaying in firefox on my primary machine:

    http://www.eyeofjupiter.com/dev/ce/i...gin-normal.gif

    It also looks pretty much like this in ie on both of my boxes.

    Now here is a screen shot of the way it looks in firefox on my secondary machine...

    http://www.eyeofjupiter.com/dev/ce/i...in-problem.gif

    Notice how all the vertical margins have collapsed in the form on the left.

    What the? Is there some setting in ff that makes vertical margins go away in only part of the page?

    This is a real head scratcher. Must I use tables in order to get a form layout I can rely on looking the same on different machines?

    This must be something simple but I'm drawing blanks.

    Any suggestions would be very much appreciated.

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. I thought I had upgraded ff on both machines but it turns out I am still running ff 1.5 on the box that is not displaying properly. At least that explains the difference between the two. i also noticed that netscape displays the same problem of no vertical margins. I can increase the vertical margins as much as I want and they have no effect in netscape and ff 1.5. But the objects spread as expected in ff 2 and ie6 and ie7. Anyone know why this is?

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I were to guess, I would think that you are seeing the classic 'block level ignoring floats inside it' problem - except you ARE declaring a height on them so that can't be it.

    I am curious why you are dicking around with the relative/absolute positioning nonsense instead of just using margins and flow order though... But being you are using a table layout and STILL have to resort to IE7 specific hacks (What the?) I'm assuming there's something else really wrong there that I'm not seeing.

    Hang on, I'll dig a little deeper.

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just able to recreate your issue - that's a strange one as I can't quite see what's actually doing it.

    My advice: drop the image replacement technique you are using on that logo, and quit screwing about with taking stuff at the top of the page out of flow order with absolute positioning - that's just ASKING for headaches (and diving for unneeded hacks)

    Try:
    <div id="logo">Site Name<span></span></div>

    (you can swap the H1 for a div if you like)

    with the following CSS:
    Code:
    #logo {
    	width: 150px;
    	height:71px;
    	position:relative;
    	overflow:hidden; /* in case text is bigger than your image */
    }
    
    #logo span {
    	display:block;
    	width: 150px;
    	height:71px;
    	position:absolute;
    	top:0px;
    	left:0px;
    	background:url(images/logo.png) top left no-repeat;
    }
    That technique requires that the logo image NOT be transparent, but has the advantage that 'CSS on / Images off' folks end up with something to look at (unlike the text-indent method)

    Once you do that, you can pull all the position:absolute and let the header work in flow order, instead of dicking about with trying to shoehorn your positioning. To make the menu 'ride up' next to the logo, just use a negative top margin on the menu... all that's left then is the math to make sure you still come out to 121 pixels in height total.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If anyone reading this is wondering where the actual logo is on the page, I deleted the css that points to the image location to protect the innocent. Deathshadow saw right thru that with his night vision goggles.

    Thanks DS for the feedback.

    All the comments youíve made deal with items in my header div, which is related to the form container (where my problems are) only in that they both share the same wrapper ancestor. Otherwise they are unrelated. Are you suggesting that the fact that vertical margins in the form area arenít working in netscape/mozzilla/ff1.5 but work fine in ie and ff2 may be connected to the absolute positioning in my header? If so that would be a phenomenon Iím not familiar with. Or are you just saying ďby the way, I think you could code a little better in the headerĒ?

    Either way, I appreciate the feedback. Although I donít see how the header code affects my problem in the forms. In fact, I removed all the header code that you have implicated and the margin problem in the form area still rears its head in netscape.

    As for your comments on how I coded in the header, thanks again for the suggestions. You don't like that I have an <i> tag that is positioned absolutely within a logo tag that is also positioned absolutely? Seems to work fine with no side effects. The suggestion you made does have the advantage over the way I did it in that folks with css on and images off still have something to look at. However, I need the text hidden from anyone with css on and images on (most people). That is why I surrounded the header text equivalent with an <i> tag and positioned it 999em to the left (so at least screen readers that wonít read display:hidden text will still see it). With your method, both the logo and the text is visible to folks with css and images available. So unless I can come up with a way that works so everyone sees what they should in all cases, Iíll have to stick with how I have it.

    You also suggested that I give the navigation band a margin from the top of the page instead of positioning it from the bottom of itís container. The reason I did it the latter way was so that if text size is increased, the tabs will expand up from the container bottom instead of expanding down from the top and overlapping the area underneath. However, the tabs overlap the area underneath anyway (a little) when text size is expanded. Yet I still donít quite understand why you think going the other way would create an advantage that would warrant my changing it. Maybe you could convince me still.

    Still not sure why I donít have vertical margins in the form in netscape. Maybe Iíll start another thread with a more appropriate title.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rumremix
    With your method, both the logo and the text is visible to folks with css and images available. So unless I can come up with a way that works so everyone sees what they should in all cases, I’ll have to stick with how I have it.
    No it isn't. The element with the background image is positioned on top of the text, hence why death shadow mentioned that you can't use transparent images with that technique.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are correct. My mistake. Good method. I'll use it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •