Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts

    Inline-Block working in FF but not IE - shouldn't that be the other way around?

    Inline-block is exactly what I want - an inline element with height and width, from what I've read, it doesn't work in Firefox but it works in IE - however I'm finding that to be the other way around. In IE they're displaying exactly the same is if they were display:block but in Firefox they're perfect, which really wasn't what I was expecting.

    The page is here http://hazelryan.co.uk/projects/add and the problem elements are the select boxes.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may give your element the display:block and keep it inline with the float attribute.
    Let me study the code a little bit.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Maybe I miss something, but if you need to have them same as in IE you may simply give them display:block, or even simpler to give them nothing, as a DIV is a block level element anyway. Why do you need a definite height/width for those divs?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try this out.

    Code:
    label {
    	color:#999;
    	cursor:pointer;
    	padding-left:2px;
    	line-height:16px;
            display: block;
            clear: left;
    }
    
    .selectArea {
    	float: left;
    	height:21px;
    	background:url(/niceforms/default/select_bg.gif) repeat-x left top;
    	margin:2px;
    }
    And wrap your ":" between the two select boxes in spans and float those spans left as well.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    NancyJ (07-16-2008)


  •  

    Posting Permissions

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