25 replies [Last post]
gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

HI, I previously posted the following thread and came to realise that I needed to start again as I was going quite wrong. http://csscreator.com/node/20573

ClevaTreva helped me out in my last project and remembered of a really good example and decided to incorporate that into my design.

The issues that I am having is basically what do I do wrong, in order for FF to display it differently, and how can I avoid it. I always do the search on here to find problems and solutions and so far it has been so helpful Smile

What I am trying to achieve is the following.

http://img.photobucket.com/albums/v365/gabi_cavaller/DixcartWeb_Final.png

therefore I am trying to have.

Header
Subheader1
Subheader2
Subheader3

Wrapper
Content

Footer

But I am having slight issues that the Subheader3 goes over the Wrapper content thus hidding the text, I would have thought that the text would be pushed down as it were.

I have validated it, it is fine. The HTML and CSS is in one file, normally I would seperate it, however for ease it is all in one.

This is the page http://dixcart.addersolution.co.uk/index.asp

And these are images of the differences. first one not overflowing, second one overflowing where subheader3 has been increased from 30px high to 50px high.

Please feel free to point me in the right direction, and hopefully sometime soon I will be able to assist you somehow. Many thanks, Gabi.

AttachmentSize
dixcartFlowOk.gif73.28 KB
dixcartOverflow.gif72.49 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It looks to me as though you

It looks to me as though you have allowed a mismatch between the header height and the div used to pad out the header so that content cant slip behind/under


#clearheadercenter{
  height:300px; << was something like 250px?
  overflow:hidden;
}

#header{
  position:absolute;
  top:0px;
  width:100%;
  height:300px;
  overflow:hidden;
}

You have to slightly careful as this layout is fragile in the respect of a number of it's elements dimensions.

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

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

That definately sorted out

That definately sorted out that overlapping issue. Thank you very much Hugo. therefore due to the #clearheadercenter being slightly shortly, when the #header was increased, it would "eat" everything below. ( I think )

The other problem I am encountering is that in FF, it appears that the subheader1 subheader2 and subheader 3 has a top padding added, which I have declared it as 0px however, on IE it displays it as there is no padding at all.

Is this due to some IE coding that must be added?

Sorry about this.

html,body{ margin:0; padding:0; border:0; /* \*/height:100%;/* */ } body{ font-family:verdana,arial,sans-serif; font-size:76%; min-width:952px; background:#000000; text-align:center; } div,p{margin:0} p{ margin-bottom:.6em; } h1{ margin:0; text-align:center; font-size:1.5em } h2{ margin:1em 0 .5em 0; font-size:1.3em } h3{ text-align:center; margin-top:0; font-size:1.1em } .clear{ clear:both; height:1px; overflow:hidden; margin-bottom:-1px; } * html .clear{display:none} #copyright{ font-size:.8em; line-height:.8em; margin:0; } #pagecontainer { top:-5px; position:relative; margin-left:auto; margin-right:auto; text-align:left; width:100%; /* \*/height:100%;/* */ } #wrapper{ min-height:100%; /* \*/height:100%;/* */ } #wrapp\65 r{height:auto} /* \*/* html #wrapper{height:100%}/* */ #clearheadercenter{ height:300px; overflow:hidden; } #clearfootercenter{ clear:both; height:84px; overflow:hidden; } #header{ position:absolute; top:0px; width:100%; height:300px; overflow:hidden; }

#subheader1{
width: 100%; /* Sets the width of the nav DIV to 100% pixels. */
margin:0;
height:100px;
overflow:hidden;
background: #FFFCCC url(images/logo_slogan.gif) no-repeat left top; /* dixcart logo as back of background */
}
#subheader1 ul {
list-style-type: none; /* Removes default list bullets. */
font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
text-align: right; /* puts items right in nav list. */
}
#subheader1 li {
display: inline; /* Changes list items from block to inline elements so that links flow side by side. */
}

#subheader1 li a:link, #subheader1 li a:visited {
color: #000000; /* Sets color of unvisited and visited links to white. */
text-decoration: none; /* Removes default underline on links. */
padding: 0px; /* Adds 5 pixels of padding around the links. */
margin-right: 3px; /* Adds space to the right of each list item. */
margin-left: 3px; /* Adds space to the left of each list item. */

}
#subheader1 li a:hover, #subheader1 li a:active, #subheader1 li a:focus {
color: #518DBA; /* Changes text color of links to blue on hover, activation, and focus. */
}
/* subheader2*/
#subheader2{
width: 100%; /* Sets the width of the nav DIV to 100% pixels. */
margin:0;
height:100px;
overflow:hidden;
background: #00FFCC;
}
#subheader2 ul {
list-style-type: none; /* Removes default list bullets. */
font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
text-align: right; /* puts items right in nav list. */
}
#subheader2 li {
display: inline; /* Changes list items from block to inline elements so that links flow side by side. */
}

#subheader2 li a:link, #subheader2 li a:visited {
color: #000000; /* Sets color of unvisited and visited links to white. */
text-decoration: none; /* Removes default underline on links. */
padding: 0px; /* Adds 5 pixels of padding around the links. */
margin-right: 3px; /* Adds space to the right of each list item. */
margin-left: 3px; /* Adds space to the left of each list item. */

}
#subheader2 li a:hover, #subheader2 li a:active, #subheader2 li a:focus {
color: #518DBA; /* Changes text color of links to blue on hover, activation, and focus. */
}
/*subheader3*/
#subheader3{
padding-top: 0px;
width: 100%; /* Sets the width of the nav DIV to 100% pixels. */
margin:0;
padding-top: 0px;
height:50px;
overflow:hidden;
background-color: #cc77b5;
}
#subheader3 ul {
list-style-type: none; /* Removes default list bullets. */
font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
text-align: center; /* puts items right in nav list. */
}
#subheader3 li {
display: inline; /* Changes list items from block to inline elements so that links flow side by side. */
}

#subheader3 li a:link, #subheader3 li a:visited {
color: #ffffff; /* Sets color of unvisited and visited links to white. */
text-decoration: none; /* Removes default underline on links. */
padding: 0px; /* Adds 5 pixels of padding around the links. */
margin-right: 3px; /* Adds space to the right of each list item. */
margin-left: 3px; /* Adds space to the left of each list item. */

}
#subheader3 li a:hover, #subheader3 li a:active, #subheader3 li a:focus {
color: #ffffff; /* Changes text color of links to blue on hover, activation, and focus. */
font-weight: bold;
text-decoration: overline underline;
}
/*top margin grey border around top of page*/
#topmargin{
background:#EFEFEF;
height:10px;
}
#footer{
/* border-top-style: dotted ;
border-top-color:#cc77b5;
border-top:thin; does not work in FF - needs to be done as Images*/
z-index:1;
position:absolute;
clear: both;
width:100%;
height:89px;
/*overflow:hidden;*/
margin-top:-84px;
background:#FFFCCC; /*footer colour*/
background: #FFFCCC url(images/dot.gif) repeat-x;
}
#subfooter2{
text-align:center;
height:15px;
margin-top:37px;
}
.bottomtopmargin{
overflow:hidden;
}
#clearheadercenter,#wrapper{
background:#DDDDA9;
background-image: url(background.gif);
}
#bodytext{
padding-left:2em;
padding-right:2em;
margin-top:0.5em;
line-height:1.2em
}
#nav {
width: 100%; /* Sets the width of the nav DIV to 90% pixels. */

}
#nav ul {
list-style-type: none; /* Removes default list bullets. */
font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
text-align: center; /* Centers items in nav list. */
}
#nav li {
display: inline; /* Changes list items from block to inline elements so that links flow side by side. */
}

#nav li a:link, #nav li a:visited {
color: #000000; /* Sets color of unvisited and visited links to white. */
text-decoration: none; /* Removes default underline on links. */
padding: 0px; /* Adds 5 pixels of padding around the links. */
margin-right: 3px; /* Adds space to the right of each list item. */
margin-left: 3px; /* Adds space to the left of each list item. */

}
#nav li a:hover, #nav li a:active, #nav li a:focus {
color: #518DBA; /* Changes text color of links to blue on hover, activation, and focus. */
}
#tabs
{ color: #666; float:left; width:100%; font-size: 11px; font-family: arial; font-weight: bold; line-height:normal; text-transform: uppercase; text-align: center; z-index: 2; white-space: nowrap; min-width: 930px; padding-left: 10px; }
#tabs ul
{
margin:0;
padding:5px 5px 0;
list-style:none;
}
#tabs li
{
float:left;
background: url(../images/ff_t_left.gif) no-repeat left top;
margin:0;
padding:0 0 0 5px;
}
#tabs a
{
float:left;
display:block;
background: url(../images/ff_t_right.gif) no-repeat right top;
padding:7px 9px 4px 3px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
}
#tabs a
{
float:none;
color:#000000;
}
#tabs a:hover
{
color:#BB170D;
}
#tabs #current
{ color: white; background-image: url(../images/ff_t_left_on.gif); }
#tabs #current a
{
background-image: url(../images/ff_t_right_on.gif);
color:white;
padding-bottom:5px;
}
#tabs #current a:hover
{
color:#FFC600;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Did you have a live url? It

Did you have a live url?

It mnay be the margin or padding on the content of the header rows. Try just commenting out the content to see what happens.

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

Hi Treva, the link is

Hi Treva, the link is http://dixcart.addersolution.co.uk/

Margin and padding has been set to 0. Will have more of a look, i must be overlooking something Smile

Thanks guys. !!

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

IE is being naughty and

IE is being naughty and collapsing margins where it shouldn't.

You need to state the margins for those UL lists in the subheader elements and IE should play along.

Remove the overflow on the subheaders and FF will collapse margins as well

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

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

Hugo, I tried removing the

Hugo, I tried removing the overflow option beforehand and it displays it funny in FF.

Below is a pic of FF and IE so you see what I mean. I have put back the overflow coding that i removed now.

Thank you Smile

** there is no padding or margin, top or bottom, as you can see, all 3 sub headers are showing the same spacing on FF.

I assumed that if you have several headers, you should have one container, with the subheaders, however, should i be doing it as several header entities? ***

It is hard knowing what the logical process of it is, and why it should be done in a specific way, I tend to do trial and error.

Thank you again.

AttachmentSize
overflowHidden.gif 72.29 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It doesn't display it funny,

It doesn't display it funny, removing the overflow hidden allows the ul margin to collapse (collapse means to push through outside the parent in effect)

Try adding a margin value explicitly i.e ul {margin-top:.6em} that should bring the ul elements inline in each browser, IE needs to have it stated.

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

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

Damn, just lost everything I

Damn, just lost everything I typed.

When I add 0.6em on the UL with the overflow removed it still displays a small gap as show in the image below. However on IE it is ok, and this is what I want it to look in IE. however I can resolve this by changing it to 0em however, it will not be centered in height, but display correctly on both browsers.

I think CSS is hard, but i did find this steep learning curve with flash, and what makes me want to learn it even more !!

Thanks.

AttachmentSize
overFlowRemoved.gif 26.19 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sorry but in all honesty

I'm sorry but in all honesty this is not perhaps the best layout to be using from a learning point of view It's a slightly tricky layout and relies on these fixed heights in the header and fixed heights can be a pain and are generally avoided in layouts.

Essentially what you want can be achieved through using the normal flow of elements, this layout is primarily working this way to achieve source order by removing the header to the bottom of the markup and is a debatable feature from an accessibility angle and it may prove easier for you to go with a more straightforward layout initially.

If you want to center elements then one way is to use the line-height property equal to the height set.

What worries me slightly is that it sounds as though you want sub3 to be basically the height of the list items and which would be easiest if it didn't have height but was dictated to by the height of list elements or padding but at this moment I can't seem to gain control of the height of that sub3 element or at least cancel out it's height

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

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

back to the drawing board

back to the drawing board Smile

It is a tricky layout as there are a lot of different variables that can affect the visual appearence, however it is hard to narrow down which one causes the issue. line height = height set was what I was intending to achieve however, this is not something that was going to work on this, i think.

The image below is what I am trying to achieve or what I think it should be.

Please correct me if I am wrong, I could be possibly thinking of CSS all wrong together, thus creating this designs.

Basically I have been given a design and been told to convert it to a website.

AttachmentSize
designIdea.gif 50.21 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's not that difficult a

It's not that difficult a design, but I think it may be easier with a different style of layout, try having a look at the 'one true layout' series of examples at positioniseverything.net.

Of course it may be possible to work this layout into a three column and sort out the height matter on the subheader3

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

gabi_cavaller wrote:Hi

gabi_cavaller wrote:
Hi Treva, the link is http://dixcart.addersolution.co.uk/

Margin and padding has been set to 0. Will have more of a look, i must be overlooking something Smile

Thanks guys. !!

Hi

Hadn't had time to look at it till now. The ul in header2 cause the gap above it and so on. If you float the ul right, it fixes it. It is indeed a margin problem to do with the ul.

The other thing I would like to clarify is, this isn't a layout of mine, is it?

Trevor

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

ClevaTreva wrote: The other

ClevaTreva wrote:

The other thing I would like to clarify is, this isn't a layout of mine, is it?
Trevor

er I think it might be Treva

http://csscreator.com/node/19716

I certainly recognized the header absolute and the header padding from I think another post as well 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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Nah The OP didn't use my

Nah

The OP didn't use my code as posted. They might have taken a few bits, but the html and css are substantially different. No floats on the content for example, nor any of the float wrappers.

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

which then is part of the

which then is part of the problem Smile bits of code extracted == little problems

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

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

lol the coding is all yours

lol the coding is all yours Smile

All your original bits are there, I have simply added some of my bits Smile and moved some of it around...

Will have to look at it further tomorrow. Shattered.

The hardest bit is understanding how to get all of it together and knowing how to use it.

Take care,

Gabi.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, like I said, you could

Well, like I said, you could float the ul's, that does fix it.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

gabi_cavaller wrote:All your

gabi_cavaller wrote:
All your original bits are there, I have simply added some of my bits Smile and moved some of it around...

Gosh

When I look, whilst the header and footer are there, the content bit really is missing a lot of the html divs. For example, I couldn't see a float in sight. I know all my columns are made with floats.

To the problem, it is the ul itself.

One of the parts of my code that is missing is the reducing all margins paddings and other bits to 0. Just adding ul{margin:0} at the end of the css and taking out the margin-top:.6em; from the header3 ul and I can't see any difference between FF and IE.

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

I see, well I will sort the

I see, well I will sort the changes Smile

Thanks again for all your help, it is really appreciated. !!

When you started, did you not have a clue on CSS and have been building up your understanding over time? Its taking me a while.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

gabi_cavaller wrote:When you

gabi_cavaller wrote:
When you started, did you not have a clue on CSS and have been building up your understanding over time?

I knew nothing about three years ago. Then I found sitepoint css-discuss and this site. And now thi is where I go, not the other 2.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

We lost Treva for a while,

We lost Treva for a while, but then he came back again Smile

Verschwindende wrote:
  • CSS doesn't make pies

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

to help people like me

to help people like me !!!

Excellent, hopefully I can return the favour.

Thanks guys. Will make the changes then let you know. Absolute stars.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I was lost, now I am

I was lost, now I am found.

Actually, a bit big to lose Wink

natrajr.83
Offline
newbie
India
Last seen: 13 years 28 weeks ago
India
Joined: 2007-03-10
Posts: 2
Points: 0

Pls help.... Z-indexing problem

This comment has been moved here.

gabi_cavaller
Offline
Regular
UK
Last seen: 11 years 4 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

I think I am going about

I think I am going about this all wrong :s

Originally I started with this.

http://dixcart.addersolution.co.uk/design.asp

Then changed everything to the following (which now FF and IE6 & IE7 are the same)

http://dixcart.addersolution.co.uk/index.asp(not completed)

The problem I am encountering is the TABS accross the top.

What I wanting to create a CMS content, therefore the information will be derived from the DB.

This is so hard.