SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS problem in IE. Floats in FF, but not in IE.

    Okay, I have an element floated to the right, and it works in FF, but not IE. Any possible solutions?

    FF CSS:
    Code:
    *{margin:0;padding:0;}
    html,body{height:100%;}
    body{font-size:75%;background-color:#000066;}
    #all{height:100%;width:100%;display:table;vertical-align:middle;}
    #all2{	display:table-cell;vertical-align:middle;}
    #all3{position:relative;left:50%;float:left;}
    #w{position:relative;left:-50%;margin-top:10.5em;margin-left:-30em;height:25em;max-width:1020px;min-width:600px;max-height:800px;float:left;}
    #con{width:46.6em;height:100%;}
    #w,#h{width:60em;}
    #l,#r,#rH,#rF{width:13em;}
    #rH{margin-top:0.1em;}
    #l,#rH li,#c h2{margin-left:0.1em;}
    #con,#l,#lH,#l [type="text"]{float:left;}
    #c,#r,#rF,#rH li,#l div [type="submit"]{float:right;}
    #f,#rF{margin-top:-5.1em;}
    #c,#r{height:78%;}
    #r,#f,#h{background:url(../wp-content/themes/default/images/ban1_ie.gif) repeat;}
    #l{margin-top:0.1em;max-width:219px;min-width:140px;height:98.5%;}
    #c{margin-top:0.1em;width:33em;max-width:555px;min-width:354px;display:inline;overflow:auto;}
    #r{margin-top:0.1em;margin-right:0.1em;min-width:140px;overflow:auto;}
    ul{list-style:none;}
    #f{margin-left:13.4em;width:33em;height:4.8em;float:left;text-align:center;}
    #rF{margin-right:0.1em;height:19.05%;}
    #h{left:-0.1em;margin-top:-10.2em;max-width:1020px;min-width:600px;height:10em;max-height:1510px;min-height:100px;}
    #lH{margin-top:5%;padding:0 0 0 0.5em;}
    #l [type="text"]{width:7.5em;height:1.3em;}
    #cH{top:80%;left:0.1em;width:99.4%;z-index:4;}
    #rH{margin-left:77.9%;height:9.6em;border:0.1em solid #fff;}
    #rH li{margin-right:0.1em;display:inline;border:0.05em solid #fff;}
    #c p{margin-top:0.2em;width:98%;}
    #r ul{list-style-position:inside;}
    #h,#cH,#h>#cH img{position:absolute;}
    #c h2 a:hover{color:#ff3399;}
    a,#l [type="submit"],#l [type="text"],#rH li a,#rH li:hover{color:#fff;text-decoration:none;}
    a:hover{color:#6666cc;}
    #c h4,#c a,#r h2{color:#ffcc65;}
    #f p,#r li{color:#ccc;}
    #l [type="submit"]:hover,#rH li:hover{background-color:#6666cc;}
    #l,#rF,#rH{background-color:#ffcc65;}
    #w,#c,#h,#l,#r,#f,#rF,#l [type="submit"],#l [type="text"]{border:0.1em solid #fff;}
    p,h4,h5,h6,#rH li,#rF p{padding:0.2em;}
    a *,#l [type="submit"]{cursor:pointer;}
    #r ul{margin:0.2em 0 0 0.5em;}
    #cH img{top:-7em;left:26em;border:0;}
    #l ul{margin:0.5em 0 0 0.5em;color:#000066;}
    #c,#l [type="submit"],#l [type="text"],#rH li{background-color:#9898cc;}
    IE CSS:
    Code:
    body{background-color:#000066;}
    a{text-decoration:none;color:#fff;}
    #all3{top:50%}
    #w{top:-50%;margin-left:0;}
    #h{position:absolute;top:0.4em;left:0.1em;width:54.7em;height:8em;border:0.1em solid #fff;}
    #con{width:42em;height:15em;float:left;}
    #c{width:28em;height:15.8em;float:right;border:0.1em solid #fff;background-color:#9898cc;}
    #l{position:absolute;top:0;left:0;width:13.4em;height:20em;border:0.1em solid #fff;}
    #r{width:12.6em;height:15.8em;border:0.1em solid #fff;}
    #f{margin:0.1em 0 0 6.9em;width:28em;height:4em;border:0.1em solid #fff;}
    #rF{margin:1px 0 0 1px;width:12.6em;height:4em;border:0.1em solid #fff;}
    #c h2{margin-top:1em;font-size:1.2em;}
    #c h4{font-size:1em;}
    #c p{width:94%;}
    #h #lH{width:15em;height:auto;float:left;border:0;}
    #h #cH{width:21.4em;float:left;}
    #h #rH{margin:0.1em 0.1em 0.1em 0;width:12.6em;height:9.3em;border:0.1em solid #fff;text-align:right;}
    #h h1{padding:5% 0 0 0.3em;font-size:1.8em;}
    #h h3{padding:0 0 0 0.6em;font-size:1em;}
    #h #cH img{margin:1em;float:right;width:65%;height:7em;}
    #r ul,#r li{margin:0;padding:0;}
    The element I'm referring to is "#rH", and feel free to offer suggestions. Thanks in advance.

  2. #2
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you able to provide a live link?

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SunnaH
    Are you able to provide a live link?
    Not at the moment unfortunately. Sorry.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Three things...

    1) We'll need to see the HTML to be able to see what you are applying these styles to

    2) Why do you have seperate stylesheets for different browsers?

    3) Those are possibly the strangest names I've ever seen for CSS classes and ID's. Don't you think it would be much easier if you gave things names of what they are actually doing on the page? e.g. #content, #menu, #footer, #header etc? I'm guessing that you have shortened these names and the letter stands for something but it's difficult for anyone else looking at it and when you come back to it in a year will you remember what everything stands for?


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
  •