Advanced Search

Results 1 to 3 of 3

Thread: 2 basic issues with browser compatibility

  1. #1
    Join Date
    Dec 2004
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 2 basic issues with browser compatibility

    Hey guys,

    I got few basic comparability issues with CSS. Or maybe I'm just doing something wrong, so feel free to correct it.

    1. 3 column header. I've setup 3 column header to have different things in each. FF and Chrome work fine, IE8 won't line everything up as it supposed to:
    Code:
    /*********** header box ***************/
    #headerbox{width:953px;height:80px;margin:0;display:block;margin:0 auto;}
    #headerbox #lhbox{width:300px;height:80px;margin:0;display:block;text-align:left;vertical-align:middle;float:left;}
    #headerbox #lhbox img{width:245px;height:65px;margin:0;vertical-align:middle;border:0;margin-top:5px;}
    #headerbox #chbox{width:353px;height:80px;margin:0;display:block;vertical-align:middle;float:left;}
    #headerbox #rhbox{width:300px;height:80px;margin:0;display:block;text-align:right;vertical-align:middle;float:right;}
    /********** header box end ***********/
    2. Small issue with rounded corners in FF. It works fine in Chrome, but FF and IE won't round my corners.
    Code:
    #sampleform4 {margin-bottom:5px;}
    #sampleform4 h2 {position:absolute; left-9999px; top:-9999px;}
    #sampleform4 input {vertical-align:middle; font-weight:bold; font-size: 12px; -moz-
    border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#48494c;}
    #sampleform4 input[type="text"] {width:186px !important; padding:5px 85px 5px 5px; 
    background:transparent; border:1px solid #48494c;}
    #sampleform4 input[type="submit"] {width:80px; margin-left:-87px; padding:3px; 
    border:none; color:#444547;background: #889399;cursor:pointer;-moz-border-radius:2px; 
    -webkit-border-radius:2px;border-radius:2px;text-shadow: 0 0 18px #fafafa; }
    #sampleform4 input[type="submit"]::-moz-focus-inner {border:0;}
    #sampleform4 input[type="submit"]:focus {background:#333;}
    #sampleform4 input[type="submit"]:hover {filter:alpha(opacity=90);-moz-opacity:0.9;-
    khtml-opacity: 0.9;opacity: 0.9;}
    Really appreciate your help!

  2. #2
    Join Date
    Dec 2010
    Location
    Spain, near Tarragona
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Question 2: Radius for FF (Mozilla is stated like the "-webkit", but using "-moz"
    IE doesnt contribute rounded corners, must be created e.g. using <canvas> and emulating business like "excanvas". Long live Google....

  3. #3
    Join Date
    Dec 2010
    Location
    Hyderabad, India
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Code:
    #headerbox {
    width:953px;
    height:80px;
    margin:0;
    display:block;
    }
    
    #lhbox {
    width:300px;
    height:80px;
    margin:0;
    display:block;
    text-align:left;
    vertical-align:middle;
    float:left;
    }
    
    #lhbox img {
    width:245px;
    height:65px;
    margin:0;
    vertical-align:middle;
    border:0;
    margin-top:5px;
    }
    
    #chbox {
    width:353px;
    height:80px;
    margin:0;
    display:block;
    vertical-align:middle;
    float:left;
    }
    
    #rhbox {
    width:300px;
    height:80px;
    margin:0;
    display:block;
    text-align:right;
    vertical-align:middle;
    float:right;
    }
    I cleaned up the syntax so that I could read better.

    I can see some things here done which will not allow true-cross browser compatibility. If you are trying to align things inside those DIVs, you have to use the "margin" or "padding" property. Vertical-align will not be cross browser compatible, and moreover it is a property to be used for table cells.

Tags for this Thread

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
  •