SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Quick IE Question/Problem?

    Anyone help me out with some code, which will make a div wider in IE if i tell it too, but stay the same with other browsers?

    Basically i have a div holder with some left padding.

    Looks fine on FF etc



    Looks like this on IE



    Code:
    div#header div#topDetails{
    	background-color: #DBDBDB;
    	height: 35px;
    	width: 230px;
    	margin-left: 8px;
    	float: left;
    }
    Now if i made the width 250px it looks fine in IE, but rubbish in FF.

    So basically is there any code i can put so when its IE that div would be 250px. Other browsers 230px?

    I'm sure there is something like that but i cannot find it anywhere.

    Anyone help?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like a double margin bug. Try adding display: inline; to the style rule.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah i tried that but it didn't work, did the font-size 0% thingy as well.

    Thats why i thought whether there was some small code to tell it that when its IE be another width, can this not be done? I'm sure it could

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the full HTML and CSS code here?

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go

    Code:
      <div id="header">
        <div id="topDetails">
          <ul id="telEmail">
            <li>Tel:01236 123654 </li>
            <li>E.<a href="mailto:">info@emailaddco.uk</a></li>
          </ul>
        </div><!--topDetails-->
        
      </div><!--header-->
    css

    Code:
    div#header{
    	height: 245px;
    }
    
    
    div#header div#topDetails{
    	background-color: #DBDBDB;
    	height: 35px;
    	width: 230px;
    	margin-left: 8px;
    	float: left;
    	display: inline;
    }
    
    div#topDetails ul#telEmail{
    	padding:0;
    	margin-top: 10px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 10px;
    }
    div#topDetails #telEmail li{
    	list-style:none;
    	display:inline;
    	font-size: 1.2em;
    }
    div#topDetails #telEmail li a{
    	color: black;
    	text-decoration: none;
    }
    div#topDetails #telEmail li a:hover{
    	color: #AB0049;
    }
    Last edited by Jezthompson12@nt; Nov 24, 2007 at 17:50.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, can you post the full code for the entire page? That's what I wanted.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh sorry, here you go.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    
    <meta name="description" lang="en" content="" />
    <meta name="keywords" lang="en" content="" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="" />
    <meta name="revisit-after" content="3 DAYS" />
    <meta http-equiv="content-language" content="en" />
    <meta name="rating" content="general" />
    <link href="styles/importer.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    
    <div id="wrapper">
      <div id="header">
        <div id="topDetails">
          <ul id="telEmail">
            <li>Tel:01236 123654 </li>
            <li>E.<a href="mailto:info@sillslegal.co.uk">info@emailaddco.uk</a></li>
          </ul>
        </div><!--topDetails-->
        
        <div id="logo">
          <h1><a href="index.asp">Sills &amp; Betteridge</a></h1>
        </div><!--logo-->
      </div><!--header-->
      
      
      <div id="navHolder">
        <ul id="nav">
            <li><a href="#">About</a></li>                            
            <li><a href="#">Legal Services</a> </li> 
            <li><a href="#">Training</a> </li> 
            <li><a href="#">People</a></li> 
            <li><a href="#">Contact Us</a></li> 
          <li><a href="#">Resources</a></li> 
        </ul><!--nav-->    
        
          <ul id="iconNav">
    	    <li id="email"><a href="#">email</a></li>
    		 <li id="plusText"><a href="#">plusText</a></li>
    		 <li id="minusText"><a href="#">minusText</a></li>
    		 <li id="print"><a href="#">print</a></li>
    		 <li id="help"><a href="#">help</a></li>
          </ul><!--iconNav--> 
          
      </div><!--navHolder-->
      
      
      <div id="contentHolder">
        <div id="contentLeft">
          <div id="contentTitle">
            <h1>Personal Injury</h1>
             <h2>Personal Injury</h2>
             <div class="separater"><!--x--></div>  
          </div>
          <p>
            <!--contentTitle-->
          Sills &amp; Betteridge offer a full range of legal services for both private and business <br />
          clients. Costs are an important consideration for all clients. You will find our charges <br />
          competitive and flexible. Legal Aid, legal expenses insurance, &quot;no win no fee&quot; <br />
          agreements and credit card payment are all on offer. We also offer our secure online <br />
          residential convey ancing &quot;Track My Case&quot; You can browse our site by department, <br />
          or find a page matching particular keywords using the search box.      </p>
          <p>&nbsp;</p>
          <p>Sills &amp; Betteridge offer a full range of legal services for both private and business <br />
            clients. Costs are an important consideration for all clients. You will find our charges <br />
            competitive and flexible. Legal Aid, legal expenses insurance, &quot;no win no fee&quot; <br />
            agreements and credit card payment are all on offer. We also offer our secure online <br />
            residential convey ancing &quot;Track My Case&quot; You can browse our site by department, <br />
            or find a page matching particular keywords using the search box.</p>
          <p>&nbsp;</p>
          <p>Download this document in full as a <a href="#">pdf</a></p>
        </div><!--contentLeft-->
        
        <div id="contentRight">
          <div id="topBox"></div><!--topBox-->
          <div class="rightBoxs">Content for  class "rightBoxs" Goes Here</div><!--rightBoxs-->
          <div class="rightBoxs">Content for  class "rightBoxs" Goes Here</div><!--rightBoxs-->
          
        </div>
        <!--contentRight-->
        <div class="separater"><!--x--></div>  
      </div><!--contentHolder-->
      
      
      
      <div id="footer">
      
        <div id="footerNav">
        
        
          <ul id="addNav">
            <li><h1>Legal Services</h1></li>
            <li><a href="#">Agriculture </a></li>
            <li><a href="#">Commercial </a></li>
            <li><a href="#">Commercial Property</a></li>
            <li><a href="#">Criminal </a></li>
            <li><a href="#">Family Law</a></li>
            <li><a href="#">Personal Injury </a></li>
            <li><a href="#">Public Law </a></li>
            <li><a href="#">Residential Conveyancing</a></li>
            <li><a href="#">Wills, Trusts, Probate
    &amp; Elderly Persons</a></li>
          </ul>
        </div><!--footerNav-->
        <div id="footerLeft"></div><!--footerLeft-->
        <div id="footerRight"></div>
        <!--footerRight-->
      
      
      <div class="separater"><!--x--></div>  
      </div>
      
      
      <!--footer-->
    <div class="separater"><!--x--></div>  
    </div>
    <!--wrapper-->
    </body>
    </html>

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... there's a lot more code there than necessary (and for the record, most of those META tags you have there are literally useless). Now that I have the HTML, can you post the full CSS file for the page?

  9. #9
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh really i didn't realise. Any tips on what i should take out, thought it was ok


    Here is the css, probably lots here thats not needed as well

    Code:
    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
    acronym, address, big, cite, code, del, dfn, em, 
    font, img, ins, kbd, q, s, samp, small, strike, 
    strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, 
    form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    vertical-align: baseline;
    }
    
    body {
    	font-size:62.5&#37;;
    	background-image: url(../assets/build/bodyBackground.gif);
    	background-repeat: repeat-x;
    	background-color: #F2F2F0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    .separater {clear: both;}
    
    
    
    
    /********************************* Structure Styles Go Here ********************************/
    
    div#wrapper{
    	width: 785px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    
    
    
    /********************************* End Structure Styles ********************************/
    
    
    
    
    /********************************* Header Styles Go Here ********************************/
    
    
    div#header{
    	height: 245px;
    }
    
    
    div#header div#topDetails{
    	background-color: #DBDBDB;
    	height: 35px;
    	width: 230px;
    	margin-left: 8px;
    	float: left;
    	display: inline;
    }
    
    div#topDetails ul#telEmail{
    	padding:0;
    	margin-top: 10px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 10px;
    }
    div#topDetails #telEmail li{
    	list-style:none;
    	display:inline;
    	font-size: 1.2em;
    }
    div#topDetails #telEmail li a{
    	color: black;
    	text-decoration: none;
    }
    div#topDetails #telEmail li a:hover{
    	color: #AB0049;
    }
    /* -----------------------------------*/
    /* >>>>>>>>>>>>>Logo<<<<<<<<<<<<<<<<<-*/
    /* -----------------------------------*/
    
    div#header div#logo{
    	background-image: url(../assets/build/logo.png);
    	height: 61px;
    	width: 262px;
    	margin-left: 8px;
    	float: left;
    	margin-top: 70px;
    	clear: left;
    }
    
    div#header div#logo h1{
    	text-indent: -7000px;	
    }
    
    div#header div#logo h1 a{
    	display: block;
    	height: 61px;
    	width: 262px;	
    }
    
    /********************************* End Header Styles ********************************/
    
    
    
    /********************************* Navigation Styles Go Here ********************************/
    
    
    
    div#navHolder{
    	height: 42px;
    }
    
    
    div#navHolder ul#nav{
    	padding:0;
    	float: left;
    	margin-top: 13px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    
    div#navHolder #nav li{
    	list-style:none;
    	display:inline;
    }
    
    div#navHolder #nav li a{
    	color: white;
    	text-decoration: none;
    	font-size: 1.2em;
    	padding-left: 8px;
    }
    
    div#navHolder #nav li a:hover,div#navHolder #nav li a:active{
    	color: #AB0049;
    }
    
    /* -----------------------------------*/
    /* >>>>>>>>>>>>>Icon Nav<<<<<<<<<<<<<-*/
    /* -----------------------------------*/
    
    
    
    div#navHolder ul#iconNav  {
    	padding:0;
    	list-style:none;
    	display:inline;
    	float: right;
    	margin-top: 5px;
    	margin-right: 32px;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    
    div#navHolder #iconNav li  {text-indent: -9000px;float: left;}
    
    div#navHolder #iconNav li a {display:block;height: 32px;width: 35px;}
    
    li#plusText a, li#minusText a, li#print a, li#help a{margin-left: 7px;}
    
    div#navHolder #iconNav li a:hover {background-position: 0px -32px;}
    
    
    li#email a{background-image: url(../assets/build/miniNav/email.gif);}
    li#plusText a{background-image: url(../assets/build/miniNav/plusText.gif);}
    li#minusText a{background-image: url(../assets/build/miniNav/minusText.gif);}
    li#print a{background-image: url(../assets/build/miniNav/print.gif);}
    li#help a{background-image: url(../assets/build/miniNav/help.gif);}
    
    /********************************* End Navigation Styles ********************************/
    
    
    /********************************* Content Styles Go Here ********************************/
    
    div#wrapper div#contentHolder{
    	
    }
    
    div#contentHolder div#contentTitle{
    	width: 504px;
    	float: left;
    	margin-bottom: 27px;
    	margin-top: 1px;
    }
    
    div#contentHolder div#contentLeft{
    	float: left;
    	width: 504px;	
    }
    
    div#contentHolder div#contentRight{
    	float: right;
    	width: 268px;
    	margin-bottom: 20px;
    }
    
    
    div#contentRight div#topBox{
    	height: 142px;
    	margin-top: 1px;
    	background-color: #EBEBEB;
    	background-image: url(../assets/build/downArrow.png);
    	background-repeat: no-repeat;
    	background-position: 95% 41%;
    	width: 236px;
    	float: right;
    }
    
    div#contentRight div.rightBoxs{
    	height: 102px;
    	margin-top: 10px;
    	background-color: #EBEBEB;
    	background-image: url(../assets/build/downArrow.png);
    	background-repeat: no-repeat;
    	background-position: 95% 10%;
    	float: right;
    	width: 236px;
    }
    
    /********************************* End Content Styles ********************************/
    
    
    
    
    /********************************* Footer Styles Go Here ********************************/
    
    div#wrapper div#footer{
    	height: 244px;	
    }
    div#footer div#footerNav{
    	float: left;
    	width: 236px;
    	padding-left: 550px;
    	margin-bottom: 10px;	
    }
    
    div#footer div#footerLeft{
    	float: left;
    	width: 504px;
    }
    
    div#footer div#footerRight{
    	width: 236px;
    	float: right;
    }
    
    
    div#footer div#footerLeft, div#footer div#footerRight{
    	background-color: #EBEBEB;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #AB0049;
    	height: 79px;
    }
    /********************************* End Footer Styles ********************************/

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jezthompson12
    Thats why i thought whether there was some small code to tell it that when its IE be another width, can this not be done? I'm sure it could
    Yes you can give code just to IE using one of the many hacks around or more safely by using conditional comments, but as Dan above is trying to ascertain you first need to find the cause of the problem and then determine whether its a bug or a coding error.

    So far the code you have posted produces a result that is the same in Firefox and IE and doesn't look like the images you posted in your first post. Firefox looks like the IE image you posted with the text on two lines.

    This is what I am seeing in Firefox and IE with the exact code you posted:

    http://www.pmob.co.uk/temp/images2/jez1.gif

    Therefore can you post a working example that exhibits the problem you mention (a link would be better but I'm guessing you don't have online access seeing as your images are hosted at imageshack).

    It may actually end up that you need a hack but you must rule out everything else first.

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also get the same result as Paul. Trying to fit text into a pixel width container will always fail when the text is resized anyway. I would be more inclined to change the 230px width to 27em .

  12. #12
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, here is how it is online. Not done anything since posting the above.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm still a little confused as it still looks exactly the same in IE and Firefox just like that picture I posted.

    Is your question still the same?

    If you want that email text to fit you will have to either shrink it or make the space available bigger.

    If you reduce the font-size then eventually it will fit on one line.
    Code:
    div#topDetails ul#telEmail{
        padding:0;
        margin-top: 10px;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 10px;
    white-space:nowrap;
    font-size:85&#37;
    }
    I'm guessing that perhaps you are referring to some other problem.

  14. #14
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am looking at it in FF on a Mac and its fine, that must be it?

    I shall make the holder bigger, that should fix it lol.

    What did Dan mean about unnecessary code, is my code really bad? I always want to improve, never entirely sure what i need to do though

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I am looking at it in FF on a Mac and its fine
    OK I guess you're right, I expect that's due to the smaller font on the mac but I don't have a mac to check that out.

    What did Dan mean about unnecessary code, i
    Things like this:
    Code:
    <div id="logo">
                <h1><a href="index.asp">Sills &amp; Betteridge</a></h1>
    </div>
    Could simply be :
    Code:
    <h1 id="logo"><a href="index.asp">Sills &amp; Betteridge</a></h1>
    You seem to have done that elsewhere and added unnecessary divs when none was needed.

    e.g.
    Code:
        <div id="topDetails">
                <ul id="telEmail">
                    <li>Tel:01236 123654 </li>
                    <li>E.<a href="mailto:info@sillslegal.co.uk">info@emailaddco.uk</a></li>
                </ul>
            </div>
    I didn't see any additional styling for the ul that would have made a difference so the styles could have been applied directly to the ul and no div would be needed.

    Also here there are no styles defined for contentHolder so why is it there. Then you have contentLeft and contentTitle with almost the same styles.

    Code:
    <div id="contentHolder">
            <div id="contentLeft">
                <div id="contentTitle">
                    <h1>Personal Injury</h1>
                    <h2>Personal Injury</h2>
                    <div class="separater">
                        <!--x-->
                    </div>
                </div>
                <p>
    Also there is no need to go overboard like this:
    Code:
    div#header div#logo {}
    #logo would suffice on its own. You only need the extra selectors if you want to add more weight to over-rule something else. In the end it just makes things more complicated most times.

    Use shorthand where possible:
    Code:
    div#navHolder ul#nav{
        padding:0;
        float: left;
        margin-top: 13px;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
    }
    could save 70&#37; of the code by using this instead.
    Code:
    div#navHolder ul#nav{
        padding:0;
        float: left;
        margin:13px 0 0;
    }
    Always look to minmise the css and html wherever possible.

    Hope that helps.)

  16. #16
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Everything else ok though?

    No, thanks for that its a confidence thing more than anything. Not sure how to do your examples above, say because i know what i am doing the way i have done it. If that makes sense

    Thanks again.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You just have to think ahead and if the element being used doesn't have any specific styling then you can use the element itself instead of just adding a a div.

    It all depends on the task in hand and if you are applying a range of effects then usually you will need more elements. However, you shouldn't forget about the ones you already have. In your logo you have the h1 and the anchor and both can be used to carry styling if needed. There is no need to add a div just to position the element unless it serves some other purpose.

    For instance many people wrap a div around a form and then give the div a border and background color. There's no need to do this as you could add the border and background color to the form itself.

    Without seeing your page with images its hard to say what's necessary and what isn't but empty divs are never necessary

    Just think about what you are adding and decide if you can do it more simply with less elements while at the same time making the structure appear more semantic.

  18. #18
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I shall try and do that Paul, many thanks.

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh Paul, that would be <h1 id="logo"><a href="index.asp">Sills &amp; Betteridge</a></h1>, not h1 is="logo"

    But I digress. Anyway, as Paul already said, I wanted to see the full code because I work best with it. Sometimes the code snippet may be sound, but a problem elsewhere may be causing the issue that's causing the developer to rip his or her hair out by the fist full.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dan
    Uh Paul, that would be <h1 id="logo">
    Of course it should - well spotted Dan


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
  •