SitePoint Sponsor

User Tag List

Page 55 of 66 FirstFirst ... 54551525354555657585965 ... LastLast
Results 1,351 to 1,375 of 1630
  1. #1351
    SitePoint Member
    Join Date
    May 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all. I have been working on this for sooo long, it is not even funny. I seem to have gotten everything to work in Firefox and IE6(need a few small fixes, but its almost there) using this implementation: http://www.positioniseverything.net/...ut/equalheight

    However, IE7 was freezing on me, so I was looking at the implementation that started this forum here: http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

    My test website is located here: http://wp.corpedia.com

    My css styles for IE7 are located here: http://wp.corpedia.com/wp-content/th...ts/iehack7.css

    I was hoping that someone with far more experience on this topic could take a looksey. Thanks!

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

    That is really over complicating things a bit isn't it?

    If you want a stable system then I would lose the PIE equal height techniques as they are very buggy and there would be no need for all that extra IE code. I have sites of 1000 pages that only have 2 or 3 hacks in the ie stylesheets so there is simply no need for all that extra code. (IE7 should work with the PIE technique anyway but you have to make sure that the overflowing columns don't have position:relative applied otherwise they don't get hidden.)

    If you want three equal columns in that middle section then you are nearly there with the bits of my code that you inserted but you failed to understand that the colours for the columns are supplied by the wrappers and not the columns at all.

    e.g.

    Code:
    #wrapper {
    min-height:100%;
    margin-bottom:-52px;
    background:green;
    }
    #main{background:white;}
    However that would make both columns green and you would need to repeat an image down the left side of another outer container if you wanted 2 different column colours. Of course this is starting to get complicated again and means extra html and as simple is always best I would simply do away with all the fancy stuff and just repeat an image to get all 3 column colours as in this example. It simply uses this image repeated on the main container to give the illusion of columns.

    You can then just float the three columns over the image and not use any negative margins and have a more stable system.

    I also notice that you haven't closed one of the ul's properly and the validator also shows about 76 errors that need to be addressed although most are quick simple fixes.

    If you have to do this without images then I have a demo here which is more stable than the PIE method but I think that is overshadowed by its complexity and I wouldn't use it myself

    BTW I assume you know that ie6 also reads the less than ie8 code as well and is just complicating things further.

  3. #1353
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul

    I have a problem displaying my site in IE6 and i think it's to do with that haslayout issue you mentioned. The site looks fine in IE7 and I only saw it in IE6 the other day.

    Can you have a look at these pages and tell me how to fix it?

    http://www.jackgodfrey.org.uk/gallery
    http://www.jackgodfrey.org.uk/galler...lands/image/11
    http://www.jackgodfrey.org.uk/news/1

    Many thanks for your help...just IE6 is rubbish

  4. #1354
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Yes it seems to be a haslayout issue so try this:
    Code:
    /* mac hide \*/
    * html #content3{height:1%}
    /* end hide */

  5. #1355
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    In the third link your page_numbers element is to wide. You have set it at 600px wide but there looks as though there is only about 560px actual space.

    Code:
    .page_numbers { 
        width: 560px; 
        padding: 5px 0px; 
        float:left;
        clear:left;
        margin:0 auto; 
    }

  6. #1356
    SitePoint Member
    Join Date
    May 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    That is really over complicating things a bit isn't it?

    If you want a stable system then I would lose the PIE equal height techniques as they are very buggy and there would be no need for all that extra IE code. I have sites of 1000 pages that only have 2 or 3 hacks in the ie stylesheets so there is simply no need for all that extra code. (IE7 should work with the PIE technique anyway but you have to make sure that the overflowing columns don't have position:relative applied otherwise they don't get hidden.)

    If you want three equal columns in that middle section then you are nearly there with the bits of my code that you inserted but you failed to understand that the colours for the columns are supplied by the wrappers and not the columns at all.

    e.g.

    Code:
    #wrapper {
    min-height:100%;
    margin-bottom:-52px;
    background:green;
    }
    #main{background:white;}
    However that would make both columns green and you would need to repeat an image down the left side of another outer container if you wanted 2 different column colours. Of course this is starting to get complicated again and means extra html and as simple is always best I would simply do away with all the fancy stuff and just repeat an image to get all 3 column colours as in this example. It simply uses this image repeated on the main container to give the illusion of columns.

    You can then just float the three columns over the image and not use any negative margins and have a more stable system.

    I also notice that you haven't closed one of the ul's properly and the validator also shows about 76 errors that need to be addressed although most are quick simple fixes.

    If you have to do this without images then I have a demo here which is more stable than the PIE method but I think that is overshadowed by its complexity and I wouldn't use it myself

    BTW I assume you know that ie6 also reads the less than ie8 code as well and is just complicating things further.
    Hmm. Ok thanks for getting back to me. I tried to implement it, but still cannot get the columns to "clear": http://wp.corpedia.com/

    Any ideas?

  7. #1357
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    tried to implement it, but still cannot get the columns to "clear"
    That's because you didn't listen to what I said

    In the IE8 stylsheet you have set position:none which doesn't exist in CSS.

    To change the element from relative you would need to make it static.

    Code:
    #main_left, #main_right {
        position: static;
    }
    For IE6 you will need to add position:relative to the footer or it won't show properly.

    If you post this again then please first fix all the validation errors as the page is a bit of a mess. Then remove everything from the IE stylesheets that isn't relevant. You only need the differences in the IE stylesheet and you probably only actually need one or 2 fixes not two whole pages of css.

    Sorry for the lecture but I get ill if have to look at bad code for too long

  8. #1358
    SitePoint Member
    Join Date
    May 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry for the lecture but I get ill if have to look at bad code for too long
    Hehe. Thanks Paul! Stupid mistakes from a newby coder. And on top of that, looking at this makes me sick too. Now that I seem to have things working in IE7, I will address those issues and clean up my 77 million validation errors.

  9. #1359
    SitePoint Member
    Join Date
    May 2007
    Location
    London, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Nice layout. I am currently building a website and have used your layout, but ran into an annoying problem with IE6 and I was wondering if you might be able to help.

    Problem:
    http://dev2.affinitynewmedia.com/lathams%5Fnew/
    When viewing this web page in IE6 try to maximize and minimize the window. What happens is left column moves to the right, but as soon, as you resize window it goes back to normal.

    Do you have any ideas why this may be happening? It works fine in FF and IE7 btw.

    Thanks for your help I really appreciate it.

    Best regards,
    Alex

  10. #1360
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Try adding position:relative here:

    Code:
    #outer {
        margin-left:173px;
        margin-right:173px;
        background: #FFF;
    position:relative
    }

  11. #1361
    SitePoint Member
    Join Date
    May 2007
    Location
    London, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    That's great! It worked. Nice one, mate.

    Thanks,
    Alex

  12. #1362
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chesterfield
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Header Background

    Hi Paul,

    Many thanks for such an excellent set of templates and resources on your website.

    I am looking at using your 3 col layout, http://www.pmob.co.uk/temp/3colfixedtest_4.htm for a website for a local school and was wondering if it was possible to add a repeating background image to the head section.

    I tried adding it in a similar way to the left coloumn background image but changing the repeat value. Nothing seems to be displayed. Is this to do with the clearfix class added to the head div?

    Thank you in advance Chris

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

    I'd probably have to see your code to see what the problems are but if you wanted a background image in the header then you would just add the image to #header in the normal way.

    Or were you trying to repeat an image somewhere else.?

    I'll need to see some code and an explanation of where the images is to appear to be more specific.

  14. #1364
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chesterfield
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Header Image

    Hi Paul,

    Many thanks for getting back to me.

    The site can be found at http://students.meadows.derbyshire.sch.uk/site/new3col/

    I hope you don't mind, I left your example content in. The school leadership team wanted to get a quick feel for what could be achieved and as an IT department we are rather pushed for time.

    As you can see there is a white gap between the images in the header. the plan is to have the headerrepeat.jpg image repeating accross the background of the #head to fill the gap. I have put in what I thought was the correct code looking at the left side on your example but it isn't working.

    Many thanks

    Chris

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

    You must remember that images referenced from the css file are relative to the css document and not the html page that calls it.

    Your CSS document is in the css directory and therefore you need to set the path to come back out of that directory before it will find the images directory.
    Code:
    #head{
        background: #fff url(../images/headerrepeat.jpg) repeat-x left top;
        border-bottom:1px solid #000;
        position:relative;
        margin:0 -131px 0;
        padding:0px ;
        width:auto;
        z-index:999;
    }
    Or alternatively use an absolute address if you are unsure but relative addresses are best.

    Code:
    #head{
        background: #fff url(http://students.meadows.derbyshire.sch.uk/site/new3col/images/headerrepeat.jpg) repeat-x left top;
        border-bottom:1px solid #000;
        position:relative;
        margin:0 -131px 0;
        padding:0px ;
        width:auto;
        z-index:999;
    }
    Hope that was what you wanted

  16. #1366
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chesterfield
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks

    Many thanks Paul.

    I'm not awake this week, half term coming up! I rememeber this from other sites I've worked on. I usually put the css file in the root to save me absolute referencing the images but needed a css directory for other reasons on this project and forgot about the addressing of images.

    Thank you

    Chris

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

    You also need to add position;relative to #outer to stop IE jumping.

    Code:
    #outer{  position:relative;}
    If you still want to maintain the 100% height version then you will need to lose #container which is killing the height from being passed on to #outer. Basically you only get one shot at 100% height. (read the faq on 100% height)

    You could move the margins to the body instead.

    e.g.
    Code:
    body {
        background:#99cc66;
        color: #FFF;
        margin:0 5%;
    }
    However that leaves a problem of the left and right columns as they will lose their colored effect. You could provide a background by utilizing the borders on #outer instead though.

    Code:
    #outer{
        border-left:130px solid #ffffcc;
        border-right:130px solid #ffffcc;
        background: #FFF;
        margin-bottom:-52px;
        min-height:100%;
        min-width:450px;
        position:relative;
    
    }

    Your IE file also has the wrong path

  18. #1368
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I was starting to work on a 3 column design then came across your 3 column content first layout and it fit my needs 99.9% perfectly. Instead of it being fluid and span from side to side I'd like to put it in a container that's only 970px wide.

    However everytime I try to edit the style sheet to achieve this I always break the layout either in the middle or the right column. Could you tell how I would go about doing this without breaking anything?

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

    If you want a fixed layout of 970px then I would go for a simpler design and use one background image for all the columns.

    http://www.pmob.co.uk/temp/3col-centred-template7.htm

    This makes life so much easier because there are no tricks involved. The columns are simply made by a repeating background image. You can still have content first by switching the floats around as this tutorial shows.

    When using 100% height you can only have the first wrapper on that page to be 100% high so you can't nest any more 100% high elements and therefore by changing my fluid layout into a fixed width container you double the nesting and lose the height.

  20. #1370
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Those two together works for me as well, in fact I've taken both, re-arranged some of the code and CSS and so far using the two you linked is working pretty well minus one more thing.

    In the code below I've set a padding of 5px for both the left and right column, in my test page the padding between the left and center column is great, the padding between the center column and right column doesn't look nearly as good.

    Can you suggest a fix?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>3 col fixed width template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100%;}
    /* end hide*/
    body { 
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-color: #333333; 
    	color:#000;
    	text-align:center;
     font-size:x-small;
    }
    #outer{
    	min-height:100%;
    	width:970px;
    	margin-left:auto;
    	margin-right:auto;
    	background:transparent url(images/3-colcentred-blueshade.gif) repeat-y center top;
    	background-color: #FFFFFF;
    	text-align:left;
    	border-left:3px solid #fff;
    	border-right:3px solid #fff;
    	position:relative;
    }
    * html #outer {
    	width:976px;
    	w\idth:970px;
    	height:100%;
    	background-color: #FFFFFF;
    }
    #header, #footer{
    	background:#ffffcc;
    	border-top:5px solid #fff;
    	border-bottom:5px solid #fff;
    	text-align:center;
    }
    #content{
    	float:left;
    	left: 201px;
    	width: 568px;
    	position: relative;
    }
    #left {
    	float:left;
    	width:201px;
    	position:relative;
    	left: -568px;
    }
    #left p {padding: 5px;}
    #right {
    	float:left;
    	width:201px;
    }
    #right p {padding: 5px;}
    #clearfooter {
    	clear:both;
    	height:50px;
    }
    .clearer{
    	height:1px;
    	overflow:hidden;
    	clear:both;
    	margin-top:-1px;
    }
    #footer{
    	position:absolute;
    	bottom:0;
    	left:0;	
    	width:970px;
    	height:40px;
    }
    * html #footer {
    	height:50px;
    	he\ight:40px;
    	bottom:-1px;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<div id="header">
    		<h1>Header</h1>
    	</div>
    
    	<div id="content">
    
    			<p>Center Column</p>
    			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea  rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem  ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus  est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam  et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea  takimata sanctus est Lorem ipsum dolor sit amet. </p>
    			<p>Duis autem vel  eum iriure dolor in hendrerit in vulputate velit esse molestie  consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et  accumsan et iusto odio dignissim qui blandit praesent luptatum zzril  delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor  sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
    	</div>
    
    	<div id="left">
    		<p>Left Column</p>
    		<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : </p>
    	</div>
    
    	<div id="right">
    		<p>Right Column</p>
    		<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
    	</div>
    	<div id="clearfooter"></div>
    	<div id="footer">
    		<p>Footer</p>
    
    	</div>
    </div>
    </body>
    </html>

  21. #1371
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scratch that, instead of having a

    Code:
    #right p {padding: 5px;}
    and a

    Code:
    #left p {padding: 5px;}
    I deleted those and just added

    Code:
    p {padding: 5px;}
    In FireFox it seems to work fine... can you think of any reason why this wouldn't work?

  22. #1372
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    In FireFox it seems to work fine... can you think of any reason why this wouldn't work?
    That will add padding to all p tags in the document which shouldn't be a problem if that was what you expected. Of course if you have other elements in there then they may need their own padding if they need to match.

    Just remember that if you add padding to elements like the columns then that changes the width of the element and you need to reduce the width by the same amount of padding that you have added. Alternatively nest an inner element that holds the padding you want.

  23. #1373
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the feedback and the two templates, greatly appreciated!

  24. #1374
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chesterfield
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Many thanks for your tips Paul. Think I have fixed the 100% height issue and the jump in IE.

    I have also got rid of the containers.

    However trying to put the colour back behind the side columns using the border property you described above pushes the columns out. It works fine with
    Code:
    #outer{
        border-left:130px;
        border-right:130px;
        background: #FFF;
        margin-bottom:-52px;
        min-height:100%;
        min-width:450px;
        position:relative;
    }
    However when you add:

    Code:
        
    border-left:130px solid #ffffcc;
        border-right:130px solid #ffffcc;
    It pushes the columns out. As can be seen at http;//students.meadows.derbyshire.sch.uk/site/new3col/

    Any ideas?

    Many thanks. The IE link shows how asleep I am!

  25. #1375
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chesterfield
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, headerrepeat.jpg does not show in IE...


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
  •