37 replies [Last post]
webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Hopefully this is an easy one for someone to answer.

at http://brokensoulrecords.com/content/music I want to make any lists that appear in the fluid width main column to be 100% wide. In FireFox the table containing the list takes 100% of the browser window rather than its containing div which knocks the floated div down under the left column.

If I specify a width for the containing div the table then takes 100% of that specified width but the whole idea is for the main column to be fluid. Any hints and tips guys?

Paul.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why have you floated

Why have you floated #defaultcol2 if you remove the left float then it displays as you intended. Usually for a two column layout it's sufficient to float one with fixed width and the other with no width allowing it to be fluid.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

This has caused my issue sin the past

In doing this I have always had past problems in that clearing a left aligned float in the 2nd column then clears the left column. I thought the only way to break this behaviour was to enclose each column in their own float.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes that can be a problem,

Yes that can be a problem, but this is the normal approach, and until that clearing problem rears it's ugly head maybe this is the method to use, if you do want to go with the floats then maybe you ought to margin the right side away from the left fixed width.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Demonstration of this past problem uploaded

I have removed the float and added a left-margin to the 2nd column and it does behave as I would like.

But (and there's always a but) I have then added some exmaple data of a left float and clearing paragraph after my table and the 'clear: left' style on the clearing paragraph clears the whole left column.

This severely limits the use of floats in the 2nd column and as such I have been floating all columns to get around this issue.

Paul Gardner
Partner - Webbed IT

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Hugo wrote:.. if you do want

Hugo wrote:
.. if you do want to go with the floats ..

I see no other option as any images in the main column require float to align them left or right due to the image align property being defunct and I also use Definition Lists a lot floating the term to the left so I regularly come across the clear: left issue.

Hugo wrote:
.. then maybe you ought to margin the right side away from the left fixed width.

Can you give me specific CSS code for what you are suggesting? I simply cannot get FireFox to behave as I require when floating both columns Sad Surely there must be a way to do this as other people must require floats to be used in the main column of a fluid 2 column layout.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Saw the tests , does adding

Saw the tests , does adding position:relative to the #latest contain things? or actually make use of that div as I couldn't see any styles for it.

Or try going back to using float but with left margin.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

position: relative; and float with margin

Hugo,

I guess I should have mentioned that I had already tried position: relative on both the #latest and #defaultcol2 divs to no avail. As you will now see I have reverted to my two floated coluns with a right-margin on the left (doesn't seem to matter if I apply a right-margin to col1 or a left-margin to col2).

So much for me hoping this would be an easy one to resolve Smile

Paul Gardner
Partner - Webbed IT

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Position: absolute for col1?

Would using absolute positioning for col1 cause my any major headaches? This means I can do away with the float lefts for both column and just margin-left the 2nd column away from col1.

Does this seem a sensible approach? I generally stay away from absolute positioning as it can cause fun, but seems to be OK from what I can see in this situation.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You could of course remove

You could of course remove the float once again but add display:table/table-cell to the #defaultcol2 which breaks the clear all previous floats syndrome

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Just butting in after the real work's done. :)

The html for the left nav list is ugly. Is that for IE's white space bug? If so, read http://www.csscreator.com/node/6745

For the header, and the extra space below it in IE, do

#header {
 position: fixed;
 top: 0; left: 0;
 z-index: 1;
 height: 128px;
 background: #FE8F01 url(/media/images/headerdeck.jpg) no-repeat top right;}

* html #header {
    position: absolute;
    }

That will put the header out of the flow for IE, letting the next element close up on it as in Firefox.

I didn't inspect the html or css, but looking at the page itself tells me no clear property should be needed. Hugo put you on the right track with the table-cell mention. That may or may not be the best solution, but it is likely effective. You may either clear a float or enclose it. There are several methods of doing these. None work for every case, but at least one will work for any particular case. See my enclosing float elements demo for details.

Hugo's suggestion to float the left column and use margin on the right is the way I'd go, too. That sets up contexts for each's content to live in. Within those contexts, each set of float elements could have its own container that encloses it without clearing. Each block of content would have its own container, making it trivial to hook it, as a template, to the backend scripting.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Hi Gary, kk5st wrote:The

Hi Gary,

kk5st wrote:
The html for the left nav list is ugly.

What about the HTML is ugly exactly, the lack of new lines or that it's not nested?

kk5st wrote:
For the header, and the extra space below it in IE, do ...

I am not seeing any issues with the header and space below it in FireFox and IE7. Can you advise me what issue you are having, rather than implementing what you have suggested to fix something blindly, I wouldn't learn much from that Smile.

kk5st wrote:
I didn't inspect the html or css, but looking at the page itself tells me no clear property should be needed.

It's not that a clear property was needed at any point in this page layout, but when creating the rest of the site a clear:left would have came into play. at some point.

kk5st wrote:
Hugo put you on the right track with the table-cell mention. That may or may not be the best solution, but it is likely effective. You may either clear a float or enclose it. There are several methods of doing these. None work for every case, but at least one will work for any particular case. See my enclosing float elements demo for details.

Would you suggest this over the position absolute I am currently using which displays great in FireFox 2 and IE7 for me. If so, why?

Thanks for your all the appreciated input so far.

Paul Gardner
Partner - Webbed IT

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 32 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Whoa! I'll try to answer

Whoa! I'll try to answer these questions. As I said, I didn't truly inspect the html or css. My look-see was pretty much cursory, so I may be way off base.

webbedit wrote:
kk5st wrote:
The html for the left nav list is ugly.

What about the HTML is ugly exactly, the lack of new lines or that it's not nested?

It is my belief that you should code as if the person who maintains it is a violent psychotic who knows where you live. Well formatted html makes it much easier for the eye to interpret. The only reason for removing white space from a list like that is to thwart IE's white space bug that rears its head when conditions are 'right'. Your menu meets the conditions.

Quote:
kk5st wrote:
For the header, and the extra space below it in IE, do ...

I am not seeing any issues with the header and space below it in FireFox and IE7. Can you advise me what issue you are having, rather than implementing what you have suggested to fix something blindly, I wouldn't learn much from that Smile.

When I viewed in IE, there appeared a gap equivalent to the margin used to clear the fixed position header. By explicitly making the header in IE6 and below absolute positioned, it is assuredly taken out of the flow.

Quote:
kk5st wrote:
I didn't inspect the html or css, but looking at the page itself tells me no clear property should be needed.

It's not that a clear property was needed at any point in this page layout, but when creating the rest of the site a clear:left would have came into play. at some point.

no comment.

Quote:
kk5st wrote:
Hugo put you on the right track with the table-cell mention. That may or may not be the best solution, but it is likely effective. You may either clear a float or enclose it. There are several methods of doing these. None work for every case, but at least one will work for any particular case. See my enclosing float elements demo for details.

Would you suggest this over the position absolute I am currently using which displays great in FireFox 2 and IE7 for me. If so, why?

In general, using absolute positioning for arranging major groupings has unsurmountable problems[1] if provisions are not made prerequisite. Floats, while having gotchas themselves, are more forgiving, and are more favored for this type of layout.

Quote:
Thanks for your all the appreciated input so far.

You're welcome.

cheers,

gary

[1] Check the howto section or the beginners' area for a sticky on absolute positioning. It lays out some of the issues. We aren't anti-AP, it's just that they look so inviting that many tyros get themselves in trouble, while the more versed you become in css positioning, the less you tend to need absolute positioning—at least for major stuff.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

You coped with answering all of that very well.

Ugly Code
I have put line breaks in so that the HTML is a lot more readable. Getting the code to line up perfectly when it is built up of a lot of dynamic calls isn't quite as easy, but it is now a lot better to view. I have checked in IE6 and I haven't fell foul of the white-space bug, but handy to have read your article as I have another site which is falling foul of this.

Header in IE6 and below (Breaking it out of the flow)
Aha .. so the problem was hiding in IE6 which I saw when I checked on my laptop. Have implemented your fix and have also removed the height declaration on the #navmain ul style which was causing extra pixels of height in the header spilling orange over the top of my breadcrumb menu.

Absolute positioned #defaultcol1
I have heeded the advice often dispensed on this site about absolute positioning being OK till it goes wrong then it being very evil. I have not yet taken the time to read the post about the AP pitfalls ... I am sure I will get round to it sometime soon ... definitely maybe!

Thanks again.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

webbedit wrote:Ugly Code I

webbedit wrote:
Ugly Code
I have put line breaks in so that the HTML is a lot more readable. Getting the code to line up perfectly when it is built up of a lot of dynamic calls isn't quite as easy, but it is now a lot better to view. I have checked in IE6 and I haven't fell foul of the white-space bug, but handy to have read your article as I have another site which is falling foul of this.

FWIW and you may well be aware of the fact that PHP when closed out removes any following line break that may occur so if you have ?> 'line break' then html output the line break is removed and that html tag would follow on from the last one, double line breaks can avoid that.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Back to the drawing board ... Help!

The saga restarts ...

I knew I shouldn't of used absolute positioning for the left menu, but I was in a fix and took the easy way out. However the client has now asked for a footer to be included and I soon saw the major downside. As the left column has been taken out of the normal page flow the footer does not automatically appear after both columns have finished, instead it appears over the top of, or behind depending on if z-index is in place, my left column.

So I am back to square one and very frustrated ... the issue is I want a two column layout with the 1st column having a fixed em width and the 2nd column width being fluid. However the 2nd column regularly has tables in which need to be 100% in width.

Method 1: Floating both columns left
#defaultcol1 {float: left; width: 15em; margin-right: 1em;}
#defaultcol2 {float: left;}

As soon as you place a 100% wide table in the 2nd column it drops the entire float below the left column.

Method 2: Floating 1st column and use margin-left on 2nd
#defaultcol1 {float: left; width: 15em;}
#defaultcol2 {margin-left: 16em;}

In doing this you are then unable to use the 'clear: left/both' properties anywhere in the 2nd column which is unworkable.

Method 3: Floating 1st column, use margin-left on 2nd column and 'display: table/table-cell'
#defaultcol1 {float: left; width: 15em; margin-right: 1em;}
#defaultcol2 {display: table;}

This option breaks the clear problem mentioned in Method 2, but the 2nd column then stops taking up 100% of the remaining width, even with tables specified to 100%. Giving the column 100% width applies 100% of the page in width and gives me a horizontal scroll bar.

I am tearing my hair out here as this is a perfectly sensible thing to want the CSS to do but I simply cannot get it to do it. Any help would be greatly appreciated.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm not clear on what

I'm not clear on what solution you are using at the moment, but one of the previous mentioned should work, is it a case that 'If one wanted to use the clear property' it would cause problems rather than you have to use 'clear'? I've never been sure what were clearing. If you have to clear and it's a problem then would not wrapping the float/s in a div and using sumit like overflow hidden to expand the div around the float not work? then elements following do not need to be cleared.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Clearing divs

Hugo,

Here is an example of where I have a float in the 2nd column http://brokensoulrecords.com/content/music.

The title of this page (.productlist p.title) is floated left and the format options (.productlist p.options) are floated right so the page navigation (p.pagenav) needs to clear both. If I float the 1st column and use margin-left to pad the 2nd column away from it then the content from '.productlist p.pagenav' down over would clear the 1st column.

For enclosing floats I am using the .clearfix method detailed at http://www.positioniseverything.net/easyclearing.html but this has a clear: both property in it so if I enclosed the p.title and p.options the clear: both would come into play and everything in the 2nd column would clear the 1st column

Hope this explains things further.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry I haven't a huge

Sorry I haven't a huge ammount of time as I have to go out and this is still confusing me slightly rather than clear the navigation can you not enclose those two floated items in a div and apply overfow:hidden to it then the navigation does not need clearing as it sits in the flow naturally below the div containing those two elements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

No need to apologise

No need to apologise .. I am thankful for whatever time you can spare to try and help me out.

Lets go back to the beginning as I fear in trying to resolve the issue we have lost our way and are now getting stuck on clearing the 1st column when that was an issue only caused when trying to action a method to actually solve my initial issue. Confused? I know I am.

I have set my pages back to the original setup so both columns are floated, as I would like to have them. The problem is best highlighted by two pages.

1: Home Page
In IE7 and IE6 this works fine, but in FireFox 1.5 and 2 the 2nd column becomes too wide and appears below the 1st column

2: Clothing Home Page
In IE and FireFox the table does not have enough content to fill the width of the page so I to force it to 100% width, but rather than take 100% of it's containing div, it takes 100% of the page becomes too big for it's available space and wraps the 2nd column below the 1st again.

Based on this I have two issues:

  1. I need to be able to get the tables to take up 100% of the 2nd column but they are taking up the full page width
  2. In IE7 and FireFox when the 2nd column content becomes to wide it appears below the 1st column (can be invoked by resizing the browser window), when it should begin to make the table cells smaller.

The fixes we have tried so far are detailed at post http://csscreator.com/node/19248#comment-84552

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Paul you'll probably hate

Paul you'll probably hate and curse me but I still am stuck on this need to clear things as point 2 says non float col2 and left margin works but has the drawback that clear property can't be used anywhere within col2, so don't clear things! or am I going mad? my post a couple back in reference to the floated items above the navbar was that instead of clearing the navbar below them you enclosed them in a div and used overflow on it, in other words dump the use of 'clear' altogether as it's causing problems and that includes the .clearfix in this situation and that would have to apply to any elements requiring clearing.

I realise this may still not be helpful but I'm trying to play with your layout to find alternatives but they are elusive.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

A slight change of tack

I was really fed up with what I was doing so I went in search of a reliable and stable layout where the second column would resize with the browser window and not drop the float below the left column.

I have plumped for the Holy Grail layout on alistapart and set about making it two column instead of 3. In basic tests this was working absolutely fine so I have now forged ahead and began thrown it into this major site design and all of a sudden the left menu has dissapeared in IE6 and whilst the home page looks great in FireFox all other pages seem to be stuffed?!?

I am not having a good week Sad

P.S. My CSS should now be a bit clearer with all the layout stuff at the top of the file, not sure if you really want to get involved .. I am approaching depression and have started on the wine!

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That isn't the layout that

That isn't the layout that uses padding to create column space is it? if so dump it as it causes no end of problems in IE with a form of repositioning bug when hovering anchors.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes it's that layout, hate

Yes it's that layout, hate to say this as you rapidly plunge to the depths of depression (I'm there already Smile will I ever get the hang of multidimensional arrays?) but It is demonstrating exactly the problems I had when trying to use a padding approach.

Better are the layouts at P.I.E even the old plain vanilla source ordered one would do or try the #inner-wrap width:100% float:left neg left margin 16em holding col2 with a left margin 16em and the left sidebar floated left after the inner-wrap has closed.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Aaaaarrgggghh!

What a colossal waste of a day this has been ... the layout is actually causing me just as much trouble in FireFox, even though I am using my CMS system which echos out from common templates, with all pages using the same style on the home page my left column is perfect and all others it buggers up!!!

Right, back to the drawing board again ... all I want is a stable 2 column layout where the left column is a fixed width and the 2nd column takes whatever is left of the viewport. Do you have any advice as to what I should use?

Thank you so much for your support and advice .. and I am truly sorry to be such a pest, but it is days like this when I wonder why I bother as I am losing money hand over fist whilst playing with styling issues like this and if it were not for you Hugo I think I would have put my foot through my various array of monitors.

I just want to finish my clients websites off so I can design my own site ... bee saying that for 4 years now!

Got to keep smiling though Tongue

Paul Gardner
Partner - Webbed IT

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 11 years 46 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Hugo wrote:.. as you rapidly

Hugo wrote:
.. as you rapidly plunge to the depths of depression (I'm there already Smile will I ever get the hang of multidimensional arrays?)

Ahhh, now if you're using PHP then that is an area where I may be able return the favour and help you out as I am certainly more of a developer than a designer, although when you go to this much trouble to get a page to use semantic and valid (X)HTML you are really a coder and not a designer anyway.

I will look at 'position is everything' and begin the process again, got to get these design issues out of the way today as all this trouble was just to add a footer to the site, my own stupid fault for falling into the absolute positioning trap that I have avoided for over a year.

Paul Gardner
Partner - Webbed IT

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is really scrappy but

This is really scrappy but is the negative margin sidebar after content approach which is generally well behaved, this has bits of your layout in to flesh out the layout but only a few rules so is incomplete:

/*body #header #navmain ul li.item1 a, html>body #header #navmain ul li.item2 a, html>body #header #navmain ul li.item3 a {
height: 21px; /* ie5win fudge ends */}
#navmain ul li.item1 a.active, #navmain ul li.item2 a.active, #navmain ul li.item3 a.active {
color: #4A2900;
background-position: 0 -54px;}
#navmain ul li.item1 a:hover, #navmain ul li.item2 a:hover, #navmain ul li.item3 a:hover {
color: #FFF;
background-position: 0 -27px; text-decoration: none;}
#navmain ul li.item4, #navmain ul li.item5, #navmain ul li.item6 {
float: right;
font-size: 0.8em;
padding-top: 5px; margin-right: 10px;}
#navmain ul li.item4 a, #navmain ul li.item5 a, #navmain ul li.item6 a {
color: #FDA;
padding-left: 12px;
background: url(/media/images/navmainarrow.jpg) no-repeat 0 0.2em;}

/* Breadcrumb Menu */
p#breadcrumbs {
clear: both;
margin: 0 0.5em 1em 0.5em;
font-size: 0.8em;
padding-bottom: 5px;
border-bottom: 1px dotted #CCC;}
/** new layout container styles **/
#inner-wrap {
width:100%;
float:right;
margin-left:-15em;
}
#col2 {
margin-left:16em;
background:#ccc;

}
#sidebar {
width:15em;
float:left;
background:orange;
height:500px;
}
table {
width:100%;
height:300px;
border:1px solid #000;
}
/*]]>*/

  • Help and Info
  • Table

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    webbedit
    Offline
    Enthusiast
    Tyne and Wear, UK
    Last seen: 11 years 46 weeks ago
    Tyne and Wear, UK
    Joined: 2005-08-17
    Posts: 133
    Points: 0

    Your scrappy code is looking better than my 10+ hours work today

    Now we are getting somewhere ... after using your simple new column settings, I have a layout which looks near identical across FF1.5, FF2, IE6 and IE7. There are a few issues, but the good news is in 3 out of 4 browsers I can resize the browser and nothing drops out of place ... I will now be able to get a good nights sleep.

    The issues:

    1. In FF1.5 and FF2 on the home page none of the links in column1 are working, however they work on all other pages?!? All links on the home page were working before I began playing with the layout this morning and have not changed any of the code ... weird, in IE6 and IE7 these links work fine.
    2. In IE6 column1 is not keeping its width as the browser window is resized which is a new behaviour for me. The float keeps jumping back and forth between it's correct positioning and then appearing after column2. Any ideas.

    Other than that I think I can now put everything back in place and get on with some coding changes. How are those multi-dimensional arrays coming on? Always takes me a good while to get my head around them when I use them.

    Paul Gardner
    Partner - Webbed IT

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    So getting back to some

    So getting back to some semblance of order Smile

    The non functioning links look as though it might be due to an extra closing div masking them out.

    There are also some IDs that have been reused .

    As for IE it might be an hasLayout issue so can you test for it by plonking zoom:1; in various elements in the col1 or any of the parents and see if it stabilises.

    And as for my multidimensioned arrays I think I was falling into my classic trap of over thinking everything and was getting in a flap over nested foreach loops which I just couldn't get my head around and after much ranting realised that I didn't need anything more complicated than foreach($array as $value) and then simply work on $value['name1'] $value['name2'] etc. in the loop. It seems to an easy trap to think something needs to be far more complex than it does and I now have this fear that everything I write is overworked and cumbersome especially when I see that I can reduce three lines of code to two if I just think through the nesting: $path = explode(".", basename($_SERVER['PHP_SELF']); $path = $path['0']

    Then realise the same thing about my functions and just want to give up Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    webbedit
    Offline
    Enthusiast
    Tyne and Wear, UK
    Last seen: 11 years 46 weeks ago
    Tyne and Wear, UK
    Joined: 2005-08-17
    Posts: 133
    Points: 0

    FireFox is now stable

    Good morning Hugo,

    Glad to hear you took a step back from your coding and realised it was a case of over-complicating a function. Happens to me all the time, I can spend hours looking at something and when I wake up the next day I realise I was trying to use recursive functions for something that just needed a for loop.

    Took some doing, but I found the rougue at the end of the content in column2 and I changed the #bestsellers id to a class.

    Now to try and resolve IE6 and I will be a happy man, although I should then get someone to test it on Macs as the client has already been told it doesn't work on Safari. Mind you that was around noon yesterday when I had the code well and truly broken!

    Paul Gardner
    Partner - Webbed IT

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Morning Paul, Have to admit

    Morning Paul,

    Have to admit took a look in IE6 and couldn't see a problem with the left column other than it does drop down if window too narrow so some form of min-width will probably be wise.

    The problem I find with PHP is that often there are too many ways that say, a function can perform the same task whereas C would be must stricter (not that I'm a programmer) Although I think I've understood functions and used them often enough I'll still find myself getting confused by when to return a result and when not to, I love feeding parameters, yet still get confused when not and returning results to a variable that didn't look as though it should be set by the function, at times PHP is difficult to follow in terms of the logic flow, but I digress from the subject at hand.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Paul I think the problem in

    Paul I think the problem in IE6 and the left col dropping may have to do with the .pagenav div and content can you comment it out and see if the problem persists. FF looks as though it's wrapping the text but IE seems to wait longer causing a run of fixed width that may just be expanding out col2?

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    webbedit
    Offline
    Enthusiast
    Tyne and Wear, UK
    Last seen: 11 years 46 weeks ago
    Tyne and Wear, UK
    Joined: 2005-08-17
    Posts: 133
    Points: 0

    There is no .pagenav on the homepage

    Thanks for continuing to look at this for me .. and I feel for you when you say you have problems with following the logic of PHP. When I hit a brick wall in PHP it is normally down to me losing the state of variables in various functions. I should really begin to use classes more often, but I muddle through well with what I know.

    As for your suggestion of it possibly being .pagenav causing an issue, as there is no .pagenav on the home page (which is where I see the problem most because the content is more packed into the table in the 2nd column meaning it encroaches on the 1st column faster) I do not see how that could be the cause. Have removed it from the music landing page though

    Paul Gardner
    Partner - Webbed IT

    webbedit
    Offline
    Enthusiast
    Tyne and Wear, UK
    Last seen: 11 years 46 weeks ago
    Tyne and Wear, UK
    Joined: 2005-08-17
    Posts: 133
    Points: 0

    Where have all the records gone?

    Now that helps matters a lot ... in IE6 on the music home page the table of results has dissapeared meaning thre is little content to bother the left column as you resize the window, however I doubt this is a fix the client would accept Smile

    Not sure why the content is not displaying, but as I say if the problem I am having in IE6 also happens on the homepage where there is no .pagenav then it shouldn't be the trigger.

    Paul Gardner
    Partner - Webbed IT

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    See what you mean after it's

    See what you mean after it's dropped you can jiggle it back with small movements, did you try the zoom:1 property just to see if an element needs hasLayout?

    I've been looking at classes and objects and can see why it's a better method of working but also that in a sense it's quite a different approach and I didn't want to run before I could walk or at least get uber comfortable with basics but more and more I think I have to start looking at what I've done with a view to classing it as a useful lesson to get started working with classest.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    It's to do with the table

    It's to do with the table elements having a natural fixed width at narrower widths , if you narrow the window in FF you will see the scroll bar appear and the table shrink no further, if you then scroll right you will see that the table has correctly overflowed to the right beyond the header. IE is nor overflowing it's expanding the width of col2 so I think you will need to set a min width for IE and FF in IE you can use the MS expression width script solution, also with the rulesets for col1 you will need to set display:inline as you have left float with left margin == 'double margin bug'

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    webbedit
    Offline
    Enthusiast
    Tyne and Wear, UK
    Last seen: 11 years 46 weeks ago
    Tyne and Wear, UK
    Joined: 2005-08-17
    Posts: 133
    Points: 0

    Tried the zoom property

    I had the zoom property applied to several elements with no joy and gave up to work on other jobs for a little bit. Thanks for spotting the double-margin in IE6, and for the tips on the min-width however I am clueless to this property as not seen it until I began working with that screwy layout yesterday.

    Any good resourses on how to action it and tips on which elements it should e applied to in this case?

    I've been coding in PHP for around 5 years now and I am still to create a class. I develop custom CMS systems for all my clients and I have worked on a few web based applications, so I really should eb truing to use classes to tidy up my code, but I am still to take the time to fully understand the advantages of doing so.

    Paul Gardner
    Partner - Webbed IT

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    No it's not a hasLayout isue

    No it's not a hasLayout isue to some extent it's a combo I dont think IE likes calculating the em width pixels seemed to stabalise matters but the table width is the problem as per above.

    min-Width for modern browsers is min-width:#; IE is dumb so you can use this pice of non validating script on I guess one of the outer containers:

    width:expression(document.documentElement.clientWidth < 500 ? "500px" : "auto");

    It's just a basic ternary statement so you will be able to work out it's use.

    I know that I must spend a bit of time with classes but dont use PHP to the extent that classing becomes a necessity really even with more complicated scripts it's seems like adding a layer of complexity even if it does make sense of code blocks etc.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me