Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ IE Problems

Posted by: Dejan Jan 14 2009, 07:47 AM

Heya guys,

im really sorry but i dont have the problem site on the net(no hosting)
hope ya willing to help me anyway, im searching for the problem for 2 days now.. glare.gif


The site is perfect in Opera and FF. But when i viewed it with IE my eyes teared.

-Text is way too big
-the menu on the left sucks(some kinda weird blue bar)
-Banner is not well

I tried to sort out with css validator, but i didnt understand

THE CSS

CODE
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #41383C;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixLtHdr #container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #5E7D7E;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 7px solid #5E7D7E;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 1px;
}
.twoColFixLtHdr #header {
background-image:url(Bannerindiaanzwart.jpg);
background-position: center center;
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border-left: 1px groove #00FFFF;
border-right: 1px groove #00FFFF;
border-bottom: 2px groove #00FFFF;

}
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #navigatie {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
width: 180px;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #2B547E;
color: #000000;
}
#navigatie ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
#navigatie ul li {
margin: 0;
border-top: 1px groove #736F6E;
}
#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 20px solid #348781;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #3EA99F;
color: #000000;
text-decoration: none;
width: 150px;
}
html>body #navigatie ul li a {
width: auto;
}
#navigatie ul li a:hover {
border-left: 10px solid #347235;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}


.twoColFixLtHdr #mainContent {
margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
font-size:9px;

}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #348781;
border: 1px groove #00FFFF;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 3px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style2 {
color: #000000;
font-weight: bold;
}
.style3 {color: #000000}




please help wub.gif

Ciao

Deejan

Posted by: Dejan Jan 14 2009, 12:25 PM

screenshots:

Wrong:(internet explorer)
IPB Image

right:(opera)
IPB Image

Posted by: Darin McGrew Jan 14 2009, 12:29 PM

QUOTE
-Text is way too big
This sounds like you've adjusted your font size properly in the other browsers, but not in MSIE.

QUOTE
-Banner is not well
Is your document triggering quirks mode? MSIE gets padding and height wrong in quirks mode.

Posted by: Dejan Jan 14 2009, 02:48 PM

QUOTE(Darin McGrew @ Jan 14 2009, 06:29 PM) *

QUOTE
-Text is way too big
This sounds like you've adjusted your font size properly in the other browsers, but not in MSIE.

QUOTE
-Banner is not well
Is your document triggering quirks mode? MSIE gets padding and height wrong in quirks mode.


what do u mean with triggering quirks mode?
how can i just the font to opera AND msie?

Posted by: Darin McGrew Jan 14 2009, 03:06 PM

QUOTE
what do u mean with triggering quirks mode?
See http://hsivonen.iki.fi/doctype/.

QUOTE
how can i just the font to opera AND msie?
See http://www.xs4all.nl/~sbpoley/main/adjust.html.

Posted by: Dejan Jan 15 2009, 11:22 AM

i red the page about quircks mode, but i really dont understand

i changed in my page to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Something have to change now? because it hasnt

Posted by: Darin McGrew Jan 15 2009, 12:02 PM

Can you provide the URL (address) of a document that demonstrates the problem?

Posted by: Dejan Jan 15 2009, 01:29 PM

i dont have the page hosted yet, if anyone can tell me a free quick hosting i can show you.
But i posted Screenshots above


sorry for all the questions

Posted by: Dejan Jan 19 2009, 11:01 AM

QUOTE(Dejan @ Jan 15 2009, 07:29 PM) *

i dont have the page hosted yet, if anyone can tell me a free quick hosting i can show you.
But i posted Screenshots above


sorry for all the questions



hmm anyone?

Posted by: Darin McGrew Jan 19 2009, 11:23 AM

URL?

Posted by: Frederiek Jan 19 2009, 05:33 PM

Without seeing the code of your page online (so we also see the images), it's difficult for us to help you.
Search at google for free hosting services. Personally, I can't recommend any as I've never used one.

Posted by: Dejan Jan 25 2009, 06:29 AM

heya sorry for the waiting time
I found one
have a look

http://smitska.woelmuis.nl/Our%20Bulls.html

In Opera its displayed correctly, In IE its wasted..

Thanks for ur time!

Posted by: pandy Jan 25 2009, 06:51 AM

What handsome dogs! wub.gif
Never heard of Renascence Bulldogs before. I thought they were bullmastiffs.

Hm. How come the content is on top of the logo in IE? I'd have guessed postioning but you don't seem to use that. blink.gif

Posted by: Dejan Jan 25 2009, 10:32 AM

sorry my english is not the best.
Can u be more specific Pandy?

Posted by: Christian J Jan 25 2009, 11:06 AM

Seems the banner is a background-image of the #header DIV:

CODE
.twoColFixLtHdr #header {
    background-image:url(Bannerindiaanzwart.jpg);


An element's height may change if a user/visitor changes text size in MSIE (using View > Font Size in the browser toolbar). You can avoid that by giving div#header a fixed height (say 207px).

But I'd rather suggest using an inline image (instead of a background image) with proper ALT text:

CODE
<h1><img src="http://smitska.woelmuis.nl/Bannerindiaanzwart.jpg" width="700" height="207" alt="Bulls for life"></h1>


In any case HTML does not allow you to put P elements inside an H1 element:
CODE

    <h1><center>
   <p></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </center>
    </h1>

Posted by: pandy Jan 25 2009, 11:50 AM

Oh. It happens in other browsers too (except if you use page zoom)... I assumed it was an IE only problem.

QUOTE
Can u be more specific Pandy?


I was just thinking aloud. happy.gif

Posted by: Dejan Jan 26 2009, 12:16 PM

Christian, thanks for your support but i dont really understand what you are saying

Can u type it again in the easiest english way?tongue.gif

thanks:)

Posted by: Christian J Jan 26 2009, 12:28 PM

I tried re-phrasing my previous post. If that doesn't help, please tell which part you don't understand. unsure.gif

Posted by: Dejan Jan 26 2009, 03:34 PM

where do i have to put this:
CODE<h1><img src="http://smitska.woelmuis.nl/Bannerindiaanzwart.jpg" width="700" height="207" alt="Bulls for life"></h1>

sorry :$

Posted by: Christian J Jan 26 2009, 06:08 PM

QUOTE(Dejan @ Jan 26 2009, 09:34 PM) *

where do i have to put this:
CODE<h1><img src="http://smitska.woelmuis.nl/Bannerindiaanzwart.jpg" width="700" height="207" alt="Bulls for life"></h1>

Instead of the "header" DIV, perhaps? But if you do that you must change the CSS as well.



Posted by: Dejan Feb 3 2009, 05:56 AM

QUOTE
<body class="twoColFixLtHdr">

<div id="container">
<div id="header">
<h1><center>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</center>
</h1>
<!-- end #header --></div>


This was it.
I made it like this:

QUOTE
<body class="twoColFixLtHdr">

<div id="container">
<h1><img src="http://smitska.woelmuis.nl/Bannerindiaanzwart.jpg" width="700" height="207" alt="Bulls for life"></h1>

<h1><center>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</center>
</h1>
<!-- end #header --></div>
<div id="navigatie">


and it looks like this:

IPB Image

I suck unsure.gif

Posted by: Darin McGrew Feb 3 2009, 01:38 PM

I recommend that you start by fixing the markup errors reported by our online validator. See the links at the top and bottom of this page.

Posted by: Dejan Feb 3 2009, 05:10 PM

QUOTE
Line 134, character 11:
<h1><p>
^Error: element p not allowed here; possible cause is an inline element containing a block-level element

Line 135, character 9:
<p>&nbsp;</p>
^Error: element p not allowed here; possible cause is an inline element containing a block-level element



How am i supposed to make a space when <p> is not allowed?


QUOTE
Line 138, character 9:
</h1>
^Error: end tag for p omitted; end tags are required in XML for non-empty elements; empty elements require an end tag or the start tag must end with />


hmm dont understand that one?

QUOTE
Line 203, character 15:
<p><center>bulldogsforlife</center>
^Error: element center not allowed here; possible cause is an inline element containing a block-level element



How can i center the text when its not allowed to do it that way?

Posted by: pandy Feb 3 2009, 05:26 PM

QUOTE
How am i supposed to make a space when <p> is not allowed?


With CSS margin or padding.


QUOTE
QUOTE
Line 138, character 9:
</h1>
^Error: end tag for p omitted; end tags are required in XML for non-empty elements; empty elements require an end tag or the start tag must end with />


hmm dont understand that one?


All elements must be closed in XHTML, while some closing tags are optional in HTML. That is, using only <p> is OK in HTML (while still a bad habit IMO). In XHTML you must write the closing tag out, <p>...</p>.



QUOTE
QUOTE
Line 203, character 15:
<p><center>bulldogsforlife</center>
^Error: element center not allowed here; possible cause is an inline element containing a block-level element



How can i center the text when its not allowed to do it that way?


With CSS, or if you must with the align attribute for P.
http://htmlhelp.com/reference/html40/block/p.html

Posted by: Dejan Feb 4 2009, 07:39 AM

QUOTE
Congratulations, no errors!


That's done biggrin.gif (Thanks Patty)
But the main problems are still there,

Lets start with the menu on the left(wrong viewed in Internet explorer)

This is my css+html

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>bulldogs</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #41383C;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixLtHdr #container {
width: 900px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #5E7D7E;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 7px solid #5E7D7E;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 1px;
}
.twoColFixLtHdr #header {
background-image:url(Bannerindiaanzwart.jpg);
background-color:none;
background-position: center center;
padding: 0 0px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border-left: 1px groove #00FFFF;
border-right: 1px groove #00FFFF;
border-bottom: 2px groove #00FFFF;

}
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #navigatie {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
width: 180px;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background:#2B547E;
background-image: none;
color: #000000;
}
#navigatie ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
#navigatie ul li {
margin: 0;
border-top: 1px groove #736F6E;
}
#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 20px solid #348781;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background:#3EA99F;
background-image: none;
color: #000000;
text-decoration: none;
width: 100%;
}
#navigatie ul li a {
display: block;
width: auto;
}
#navigatie ul li a:hover {
border-left: 10px solid #347235;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
background-image: none;
color: #fff;
}


.twoColFixLtHdr #mainContent {
margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #348781;
border: 1px groove #00FFFF;
text-align: center;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 3px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="twoColFixLtHdr">

<div id="container">
<div id="header">

&nbsp;
&nbsp;


<!-- end #header --></div>
<div id="navigatie">
<ul>

<li><a href="/">Home</a></li>
<li><a href="/">Our Bulls </a></li>
<li><a href="/">Renascence Breedinfo</a></li>
<li><a href="/">Renascence Pictures</a></li>
<li><a href="/">Renascence Breedings</a></li>
<li><a href="/">Renascence Pups</a></li>
<li><a href="/">Renascence Specials</a></li>
<li><a href="/">Renascence Links</a></li>
<li><a href="/">Quote's about bulldogs</a></li>
<li><a href="/">Bulls for life Trophy's</a></li>
<li><a href="/">Show pictures</a></li>
<li><a href="/">Planned Shows</a></li>
<li><a href="/">Back in time pictures</a></li>
<li><a href="/">Our O.E.B's</a></li>
<li><a href="/">O.E.B Breedings</a></li>
<li><a href="/">O.E.B Specials</a></li>
<li><a href="/">O.E.B Pups</a></li>
<li><a href="/">Planned Shows</a></li>
<li><a href="/">Back in time pictures</a></li>
<li><a href="/"> O.E.B Links</a></li>
<li><a href="/">Recieved Award</a></li>
</ul>
</div>
<div id="mainContent">

<h3>Welcome to our website,</h3>



We are no high standard breeders but we will have an occasional litter,
where the male and female are well chosen for their health and beauty
Please feel free to look around here at the website, where you can find
everything about our dogs .

Left in the menu you can see that we have diffrent sections:
at the top all about Camilla's Renascences and everything that concerns
this beautyfull breed .
than a section concerning the shows we've been to and the trophy's our dogs won
And the section beneath that is all about Conchita's O.E.B's and
everything that concerns her lovely breed


Please enjoy..........Don't forget our guestbook (Gastenboek)


</div>

<p>&nbsp;</p>
<p>.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<p>bulldogsforlife</p>

<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


http://smitska.woelmuis.nl/index.html

Posted by: pandy Feb 4 2009, 08:11 AM

What browser(s) do you see that it? Doesn't happen in IE6 or Gecko.

Posted by: Dejan Feb 4 2009, 12:11 PM

Good viewed: Opera, Firefox

Bad Viewed: Internet explorer 7

Posted by: pandy Feb 4 2009, 02:31 PM

OK. I'm off the hook then. Don't have IE7. biggrin.gif

Posted by: Dejan Feb 5 2009, 12:04 PM

bad menu:

IPB Image

correct menu:

IPB Image

Posted by: Dejan Feb 9 2009, 02:10 PM

anyone?

Posted by: pandy Feb 9 2009, 03:41 PM

Oops! I actually see that in IE6.

The gaps to the left is because you haven't removed the left margin on UL. All browsers do this differently. It's best to remove all margin and padding to start with and then add back what you want. That way you don't have to remember what browser does what.

ul, li { margin: 0; padding: 0 }

In IE6 there's also gaps between each list item (or so it looks). I don't recall the fix. I'll search for it.

Posted by: pandy Feb 9 2009, 03:55 PM

I'm not exactly sure what's going on with the vertical gaps in IE 6. I think it's something else than I thought. But adding either a bottom margin or padding to li works.

You could change the border-top you already have to border-bottom, or if you don't like the look of that, add a 1px bottom padding.

It's pretty bad, so you probably want to do something about it.
Attached Image

Posted by: Dejan Feb 14 2009, 06:56 AM

I need the same result as the picture above..(my picture=> correct menu)

Posted by: pandy Feb 14 2009, 10:00 AM

Don't you get that with those changes?

Posted by: Dejan Feb 18 2009, 04:20 PM

could u give me the css of yours pandy?

it still looks not good

Yours:
IPB Image

Mine( ONLY IN OPERA)
IPB Image

Posted by: pandy Feb 19 2009, 12:40 AM

I already did.
http://forums.htmlhelp.com/index.php?s=&showtopic=7837&view=findpost&p=33896
http://forums.htmlhelp.com/index.php?s=&showtopic=7837&view=findpost&p=33898

Posted by: Brian Chandler Feb 19 2009, 03:07 AM

QUOTE(Dejan @ Feb 19 2009, 06:20 AM) *


it still looks not good



Another way to improve it would be to correct all the spelling mistakes:

Quote's -> Quotes
Trophy's -> Trophies
O.E.B (?Old English Bulldog?) -> O.E.B.
O.E.B.'s -> O.E.B.s or OEBs is neater
Recieved -> Received

Posted by: Dejan Feb 19 2009, 01:56 PM

Thanks brian,

Paddy i think we have misunderstanding.. Could u give me the css changes u made so i could have a look?

Posted by: Dejan Feb 21 2009, 01:26 PM

would a CSS CHECK solve my viewing problems?

Posted by: pandy Feb 21 2009, 01:48 PM

QUOTE(Dejan @ Feb 19 2009, 07:56 PM) *

Paddy i think we have misunderstanding.. Could u give me the css changes u made so i could have a look?


I'm happy to explain if you tell me what you don't understand.

Posted by: Dejan Feb 22 2009, 07:47 AM

Im trying to get the SAME menu in IE then ive got in opera,

Ur screenshot is a other menu then what i need


THANKYOU for ur patience, im still learning

Posted by: pandy Feb 22 2009, 10:42 AM

My screen shot is of YOUR menu as it looks in IE6. If you make those changes I suggested it will look OK.

Posted by: Dejan Feb 22 2009, 12:24 PM

aaah now i understand pandy:)
Thanks.. I solved the gap on the left in the menu

The only problem left for the menu is the border under the words; home, Our bulls, etc..

also if u know the solution pandy, can u give me an example of the css solution... so i dont have to figure out what u really mean with your words(my bad english:P)

thanks for patience.. alot of thanks

Posted by: pandy Feb 22 2009, 12:39 PM

I'm sorry. I didn't understand you had a problem with English.

QUOTE
The only problem left for the menu is the border under the words; home, Our bulls, etc..


What's the problem with it? Don't you want the border there? Or do you mean in IE6?

I don't think you have updated the online page. It looks as before in IE6.

Posted by: Dejan Feb 22 2009, 12:56 PM

The border are not good in IE6 aswell in IE7.
Its only nice in opera...

http://smitska.woelmuis.nl/menutest2.html


Posted by: pandy Feb 22 2009, 01:13 PM

You missed the bottom padding for IE6 (alternatively bottom border). Hopefully that fixes IE7 too.

CODE
#navigatie ul li {
margin: 0;
border-top: 1px groove #736F6E;
padding-bottom: 1px /* <== Add this! */
}

Posted by: Dejan Feb 22 2009, 01:46 PM

its not working in IE7

it gives me this:
IPB Image



sad.gif

i dont need that blue border.. just a small black/grey border as u can see in page 2 in this topic(opera)

Posted by: pandy Feb 22 2009, 02:04 PM

There must still be a little gap and some background color shines through. Must be the #2B547E used as background color for .twoColFixLtHdr #navigatie. Remove that and see if it looks any better.

As said, I think there is afix for this, but I can't find it.

Posted by: Dejan Feb 22 2009, 02:59 PM

Done, Starting to look better but not perfect as in opera,
Are the borders in IE and opera different? because then i will never get the same result..

IPB Image

Posted by: pandy Feb 22 2009, 03:07 PM

There's still a blue color there... I don't see where it comes from and I can't figure out what triggers the gap. There must be something in yur code. blink.gif

Posted by: pandy Feb 22 2009, 03:59 PM

Try this. No gaps in IE, right?

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<style type="text/css">
<!--
ul,li { margin: 0; padding: 0; list-style: none }

#container { background: red;
padding: 1em;
float: left }
#container a { text-decoration: none }

#container li { border-top: 1px solid black;
background: yellow }

-->
</style>

</head>


<body>

<div id="container">
<ul>
<li><a href="http://google.com">Google it!</a></li>
<li><a href="http://google.com">Google it!</a></li>
<li><a href="http://google.com">Google it!</a></li>
<li><a href="http://google.com">Google it!</a></li>
</ul>
</div>

</body>
</html>


Basically what you have. A container floated left. A list with links inside that. A top border on each LI. And no gaps. Something in your code triggers the bug, if it is a bug, but I can't see what. unsure.gif

Posted by: Dejan Feb 22 2009, 05:15 PM

QUOTE(pandy @ Feb 22 2009, 09:59 PM) *

Try this. No gaps in IE, right?



nope... no gaps..


... sad.gif sad.gif

I will brainstorm about this tomorrow.

Posted by: Frederiek Feb 23 2009, 04:50 AM

Isn't it simply because you specified a border-bottom to #navigatie ul li a and #navigatie ul li a:hover, but already have a border-top set to #navigatie ul li?

(Sorry, I don't have IE.)

But you have other problems too, such as the images of the bulldogs in the content, which don't line up on the right of the text (Safari/Mac).
I'd suggest you start by fixing the (structural) http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//smitska.woelmuis.nl/Our%20Bulls.html&warnings=yes&input=yes found by the online validator.

Posted by: Dejan Feb 23 2009, 10:34 AM

QUOTE(Frederiek @ Feb 23 2009, 10:50 AM) *

Isn't it simply because you specified a border-bottom to #navigatie ul li a and #navigatie ul li a:hover, but already have a border-top set to #navigatie ul li?




So what one should i remove?

Posted by: Frederiek Feb 24 2009, 04:18 AM

That depends on which color you want to remove.
There's a black line (#736F6E) as wide as LI (180 px) and a blue one (#369) as wide as A (163 px).

Posted by: Dejan Feb 24 2009, 04:54 AM

i want the blue line to be removed..(only seeing in IE)

Can u give the css what the remove? so i wont have to search my head off hehe

Posted by: Frederiek Feb 24 2009, 08:24 AM

Then simply get rid of the border-bottom rule of #navigatie ul li a in your CSS. That's easily found in your page code.

Posted by: Dejan Feb 24 2009, 09:48 AM

i have another question.
Im currently making another site.


I have a main container in the middle.
But should i give it a heigh in px or in %??

Because I want it to give it a background image, so how do i know the sizes if i use %??


greetz


Posted by: Darin McGrew Feb 24 2009, 12:17 PM

Why do you need to use any height? Why can't you let it adapt to the size of its content?

Posted by: Dejan Feb 25 2009, 05:36 AM

IPB Image

Because i want to give it a background image and i dont want it to collapse, And i have to know what sizes the background image must have



grtz

Posted by: Dejan Feb 28 2009, 08:06 AM

???

Posted by: Darin McGrew Feb 28 2009, 09:57 PM

I'm still not sure what you're trying to do, or why you think you need to specify a height for your main container. Just let your main container adjust to its content, and design the background images to adapt to any height of the main container.

Posted by: Dejan Mar 17 2009, 12:45 PM

heya sorry guys for my long time being offline,
had a lot on my mind.. im back for now.
I also beginning a new design, the old one pretty sucked i think.

Darin, On your post above,
an example:

http://smitska.woelmuis.nl/layout2.html

If u open it with IE, the main container in the middle goes almost from top to bottom(which is quite correct), if u open it with opera.. Its correct on top, but on the bottom there is a huge gap.

So thats the problem, i dont know what sizes to give the container. U say let it adapt the size of the concent, but every page has a different content so that would be quite ugly that the size changes every page



Greetz

Dejan

Posted by: pandy Mar 17 2009, 11:57 PM

Fix the errors to start with.
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//smitska.woelmuis.nl/layout2.html&warnings=yes&input=yes

Fixing the only CSS error will shed some light.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsmitska.woelmuis.nl%2Flayout2.html&profile=css21&usermedium=all&warning=1&lang=en
You can't both declare new properties and use inherit at the same time. Remove inherit and you'll see what's going on.

Now you should see the underlined non-breaking spaces all the way down. The content of #header is higher than #header so it overflows. It's higher than "container too. Again it overflows. This is what happens in good browsers, not only Opera. IE instead expands the height of the box to fit its content.

This is why it's not a good idea to define a fixed height for text. It must go somewhere and you can never know the actual height of a piece of text since that depends not only on the amount of text but also on the user's preferences.

Posted by: Dejan Mar 18 2009, 09:04 AM

Thanks for your respond paddy.
I fixed all the errors in my page.
But i still dont understand why there is such a huge gap under the container(opera).
I u want to explain, please do it with a little more css codes, because i have problems with understanding
technical english.

I want to have the layout dont soon...... because damn i suck at it hehe

http://smitska.woelmuis.nl/layout2.html

Posted by: pandy Mar 18 2009, 09:58 AM

Because of this. If you had kept the text-decoration: underline you could have seen all those little underlines all the way down.

HTML
47 <div id="header">
48 <p>HEADER</p>
49 <p> </p>
50 <p> </p>
51 <p> </p>
52 <p> </p>
53 <p> </p>
54 <p> </p>
55 <p> </p>
56 <p> </p>
57 <p> </p>
58 <p> </p>
59 <p> </p>
60 <p> </p>
61 </div>


To make it clear, there is no gap. The content, that is all the paras with &nbsp;, is taller than the boxes that contain it. The text must go somewhere. Good browsers let it overflow its container, or containers in this case. The text will stick out below the containing boxes, you could say. Bad IE expands the height of the containers to fit their content.

With me now? Replace all the &nbsp; with a visible word and you can see it clearly. smile.gif

Posted by: pandy Mar 18 2009, 10:33 AM

Again, this is why it's a bad idea to fix the height of boxes that will contain text.

Posted by: Dejan Mar 18 2009, 11:32 AM

but how must i do it then without giving sizes to the containeR??
It must have a background, so i dont know what sizes... really complicated =\

Posted by: pandy Mar 18 2009, 01:41 PM

If you want it to look exactly like that, you have to cut the background up and use it as several backgrounds. For example non-repeating top and bottom parts and a middle part that repeats vertically. That may mean you need to add more HTML elements since you can only have one backgrund per element.

Posted by: Frederiek Mar 18 2009, 01:47 PM

This is all you need in the <body> tag:

CODE
<div id="container">
    <div id="header">
        <p>HEADER</p>
    </div>
</div>
<div align="center">advertentie: <script language="javascript" type="text/javascript"  src="http://views.m4n.nl/_v?zid=502602"></script>
</div>




Posted by: Darin McGrew Mar 18 2009, 02:16 PM

CODE
    <div id="header">
        <p>HEADER</p>
    </div>
To me, this just screams out for a heading element (i.e., h1, h2, etc.).

Posted by: pandy Mar 18 2009, 02:40 PM

QUOTE(pandy @ Mar 18 2009, 07:41 PM) *

For example non-repeating top and bottom parts and a middle part that repeats vertically.


So I was wrong. I thought the border was part of the image. Good news, you only need 2 bg-images. Much easier. If you use 2 containers you can use a small repeating background with just the color at the top of the old image for the outer one. Then you position the the other background, the one with the girl, at the bottom of the inner container. It will overlay the repeating background. Use the borders with these containers too and fix the space between them with padding.

Maybe it's easier to understand if you see it done. You deserve a break, I think. smile.gif
http://w1.181.telia.com/~u18115332/dejan/

Now you can have as little or much text as you want and the containers and the background(s) will adopt. I removed all heights. You probably want to adjust the padding and margins the heading, I didn't bother with that.

Posted by: pandy Mar 18 2009, 02:54 PM

I see now that I maybe didn't pick the best bit of your image for the repeating background, but you can fix that.

Posted by: Dejan Mar 18 2009, 03:44 PM

Thanks for your work pandy, appreciate it alot

So if i understand right, U made that the container adapt the sizes of the background images? or to the text what is in the container?

anyway, its almost what ive looking for, im trying to edit now and observe your version, so i know what i did wrong..

I really want to learn this biggrin.gif

thanks alot!!!

Posted by: pandy Mar 18 2009, 04:01 PM

You're welcome. happy.gif

Both wrappers expand and shrink with the height of the text. That's what block level elements do if you don't stop them. Remove some lines and then add some lines and you'll see how it works. The top background tiles vertically, so it fills the space however small or big. The bottom background doesn't tile and is glued to the bottom of the inner wrapper, so it will always be at the bottom.

If you don't want the text to go all the way down you can add a little bottom padding to the inner wrapper.

QUOTE
anyway, its almost what ive looking for, im trying to edit now and observe your version, so i know what i did wrong..


You tried to control too much. Control as little as possible. Content needs to be able to grow or shrink. Change text size in your browser and see how the height varies. That's one thing you can't have control over, so you have to work with it, not against it.

Posted by: pandy Mar 18 2009, 04:07 PM

QUOTE(pandy @ Mar 18 2009, 08:40 PM) *

Use the borders with these containers too and fix the space between them with padding


Uhm, wrong again. The inner border must be on your old container. Both the wrappers I added must span the whole width so both backgrounds can go all the way out. That's why three DIVs are needed.

Posted by: Dejan Mar 19 2009, 12:42 PM

Thanks pandy for the help!!

Another question(dont know if its right to ask here)
Does anyone have a option of how to make a nice menu that fits to the current page?

I made a few but they didnt fit nice to the page.

Posted by: Frederiek Mar 19 2009, 03:57 PM

That's a matter of taste, really.
Post the url of what you tried, maybe we can give you some suggestions.

Posted by: pandy Mar 19 2009, 04:48 PM

I forgot to say this earlier. You use 'groove' for the border style. But you can't get a groove border with only 1 pixel and I doubt it's groovy (ha ha!) with 2 pixels either. The more fancy style borders take several pixels since they consist of several parts. No show stopper. Just thought you'd want to know.

Posted by: Frederiek Mar 20 2009, 03:12 AM

Correct.

Nonetheless, even with a 2px groove border, the effect looks quite good and subtle: darker on the lighter parts of the image (top) and lighter on the darker parts (bottom).
Groovy, ain't it?

Posted by: Dejan Mar 23 2009, 02:33 PM

Sorry but here I am again... hehehehe
I changed the background (hmm well, i tried hehe) a little..

As u can see, it didnt worked out how i planned...:

http://smitska.woelmuis.nl/design2.html

It dont take the top image what i made...

Here Are the images i want:
http://smitska.woelmuis.nl/bg2-top.jpg
http://smitska.woelmuis.nl/bg2-bottom.jpg


The bottom picture is correct, the top isnt..

Dont know why, it must be a stupid mistake, but damn i cant find it.sad.gif



another question,,, is there a way to 'lock' the size of the page.. because its the right size now:)

thanks alot all..

Posted by: pandy Mar 23 2009, 02:49 PM

Yeah, it's a really stupid mistake! angry.gif Only the mistake is mine. blush.gif

You can't have a background color for #wrapper-2, because it will cover the backgrund image of #wrapper-1. Maybe that's why I saw what I thought was the border between the two images...

Sorry. sad.gif


QUOTE
another question,,, is there a way to 'lock' the size of the page.. because its the right size now:)


How do you mean?

Posted by: Darin McGrew Mar 23 2009, 02:50 PM

The background color for div#wrapper-2 covers the background image for div#wrapper-1.

Posted by: pandy Mar 23 2009, 02:51 PM

Yeah, rub it in. I deserve it. rolleyes.gif tongue.gif

Posted by: Dejan Mar 23 2009, 04:14 PM

so there is no way possible to make it with the 2 images(bottom+top) which are shown in my post above?

Posted by: Darin McGrew Mar 23 2009, 04:18 PM

QUOTE
so there is no way possible to make it with the 2 images(bottom+top) which are shown in my post above?
Sure you can. You just need to use a transparent background color for div#wrapper-2, to allow the background image for div#wrapper-1 to show through.

Posted by: Dejan Mar 23 2009, 04:26 PM

yeah sorry dumb question, tongue.gif
removed the background color of wrapper 2, fixed now.

http://smitska.woelmuis.nl/design2.html

the colors are pretty nice i think,

thanks a lot,


going to do the menu now

Posted by: pandy Mar 23 2009, 04:52 PM

Hope you weren't trying to get it to work for too long. sad.gif

Posted by: Dejan Mar 24 2009, 11:04 AM

hehe im trying to finish this site for a long time, but that's OK..
I like doing it and most of all im learning alot:)

Posted by: pandy Mar 24 2009, 03:08 PM

That's good. I'll try not to make dumb mistakes again. wink.gif

Posted by: Dejan Mar 28 2009, 02:59 PM

im trying to make a menu sort of like this:

IPB Image

but yeah.. its difficult:P

Posted by: Dejan Mar 28 2009, 03:48 PM

and btw.. does anyone haves a program/site where i can find the color code of the image above??
those colors of the menu are just perfect for my site..


thanks

Posted by: pandy Mar 28 2009, 03:58 PM

Most image editors can tell you that. Look around the menus of the one you use. Still, a stand-alone color picker can be handy at times.
http://www.snapfiles.com/Freeware/webpublish/fwcolor.html

Posted by: Dejan Mar 28 2009, 04:24 PM

wohaaa.... that menu is almost impossible to make.. doing for 3 hours now... no step closer..

damn i suck ohmy.gif

Posted by: Frederiek Mar 28 2009, 05:38 PM

http://kuler.adobe.com/
You can upload images there and fiddle with the colors.

Howw are you trying to make those menu's? And what is the difficulty you have with it?
Can you post the url of a test page?

Posted by: Dejan Apr 1 2009, 08:33 AM

http://smitska.woelmuis.nl/menutest.html

just sucks:(

Posted by: Darin McGrew Apr 1 2009, 10:51 AM

QUOTE
just sucks:(
Can you be more specific? What do you want the menu to do that it isn't doing?

Posted by: Frederiek Apr 1 2009, 12:32 PM

The markup for the menu looks good. So, like Darin, I wonder what you mean.

In the meantime, you might want to go see one of maxdesign's Listamatic tutorials:
http://css.maxdesign.com.au/index.htm

Posted by: pandy Apr 1 2009, 01:02 PM

The difference between IE and FF is partly because of the different margin/padding browsers add to list elements. Use this before any other styles for the list. Add back whatever margin and padding you really want. But the margin-left on UL also acts differntly in IE and FF. Didn't figure out why (yet).

CODE
#menu ul, #menu li   { margin: 0; padding: 0 }


If you want to have something to the right of the list, you need more. You could float the list left. While there is no other content there, you may need a clearing element below the list to make the DIVs with the backgrounds expand to contain the float.

Posted by: Dejan Apr 21 2009, 01:19 PM

heya guys..


sorry long time no see, hehe.. im very busy with my exams..
its killing my time

I will finish it as soon as possible!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)