The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> IE Problems
Dejan
post Jan 14 2009, 07:47 AM
Post #1


Member
***

Group: Members
Posts: 49
Joined: 14-January 09
Member No.: 7,542



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

This post has been edited by Darin McGrew: Feb 28 2009, 09:55 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Jan 25 2009, 11:06 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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>


This post has been edited by Christian J: Jan 26 2009, 12:26 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Dejan   IE Problems   Jan 14 2009, 07:47 AM
Dejan   screenshots: Wrong:(internet explorer) http://img...   Jan 14 2009, 12:25 PM
Darin McGrew   This sounds like you've adjusted your font siz...   Jan 14 2009, 12:29 PM
Dejan   This sounds like you've adjusted your font si...   Jan 14 2009, 02:48 PM
Darin McGrew   See Activating Browser Modes with Doctype. See Ad...   Jan 14 2009, 03:06 PM
Dejan   i red the page about quircks mode, but i really do...   Jan 15 2009, 11:22 AM
Darin McGrew   Can you provide the URL (address) of a document th...   Jan 15 2009, 12:02 PM
Dejan   i dont have the page hosted yet, if anyone can tel...   Jan 15 2009, 01:29 PM
Dejan   i dont have the page hosted yet, if anyone can te...   Jan 19 2009, 11:01 AM
Darin McGrew   URL?   Jan 19 2009, 11:23 AM
Frederiek   Without seeing the code of your page online (so we...   Jan 19 2009, 05:33 PM
Dejan   heya sorry for the waiting time I found one have a...   Jan 25 2009, 06:29 AM
pandy   What handsome dogs! :wub: Never heard of Ren...   Jan 25 2009, 06:51 AM
Dejan   sorry my english is not the best. Can u be more sp...   Jan 25 2009, 10:32 AM
Christian J   Seems the banner is a background-image of the #hea...   Jan 25 2009, 11:06 AM
pandy   Oh. It happens in other browsers too (except if yo...   Jan 25 2009, 11:50 AM
Dejan   Christian, thanks for your support but i dont real...   Jan 26 2009, 12:16 PM
Christian J   I tried re-phrasing my previous post. If that does...   Jan 26 2009, 12:28 PM
Dejan   where do i have to put this: CODE<h1><img...   Jan 26 2009, 03:34 PM
Christian J   where do i have to put this: CODE<h1><im...   Jan 26 2009, 06:08 PM
Dejan   This was it. I made it like this: and it look...   Feb 3 2009, 05:56 AM
Darin McGrew   I recommend that you start by fixing the markup er...   Feb 3 2009, 01:38 PM
Dejan   How am i supposed to make a space when <p...   Feb 3 2009, 05:10 PM
pandy   With CSS margin or padding. hmm dont underst...   Feb 3 2009, 05:26 PM
Dejan   That's done :D (Thanks Patty) But the main p...   Feb 4 2009, 07:39 AM
pandy   What browser(s) do you see that it? Doesn't ha...   Feb 4 2009, 08:11 AM
Dejan   Good viewed: Opera, Firefox Bad Viewed: Internet ...   Feb 4 2009, 12:11 PM
pandy   OK. I'm off the hook then. Don't have IE7....   Feb 4 2009, 02:31 PM
Dejan   bad menu: http://img205.imageshack.us/img205/9404...   Feb 5 2009, 12:04 PM
Dejan   anyone?   Feb 9 2009, 02:10 PM
pandy   Oops! I actually see that in IE6. The gaps to...   Feb 9 2009, 03:41 PM
pandy   I'm not exactly sure what's going on with ...   Feb 9 2009, 03:55 PM
Dejan   I need the same result as the picture above..(my p...   Feb 14 2009, 06:56 AM
pandy   Don't you get that with those changes?   Feb 14 2009, 10:00 AM
Dejan   could u give me the css of yours pandy? it still ...   Feb 18 2009, 04:20 PM
pandy   I already did. http://forums.htmlhelp.com/index.ph...   Feb 19 2009, 12:40 AM
Brian Chandler   it still looks not good Another way to improv...   Feb 19 2009, 03:07 AM
Dejan   Thanks brian, Paddy i think we have misunderstand...   Feb 19 2009, 01:56 PM
pandy   Paddy i think we have misunderstanding.. Could u ...   Feb 21 2009, 01:48 PM
Dejan   would a CSS CHECK solve my viewing problems?   Feb 21 2009, 01:26 PM
Dejan   Im trying to get the SAME menu in IE then ive got ...   Feb 22 2009, 07:47 AM
pandy   My screen shot is of YOUR menu as it looks in IE6....   Feb 22 2009, 10:42 AM
Dejan   aaah now i understand pandy:) Thanks.. I solved th...   Feb 22 2009, 12:24 PM
pandy   I'm sorry. I didn't understand you had a p...   Feb 22 2009, 12:39 PM
Dejan   The border are not good in IE6 aswell in IE7. Its ...   Feb 22 2009, 12:56 PM
pandy   You missed the bottom padding for IE6 (alternative...   Feb 22 2009, 01:13 PM
Dejan   its not working in IE7 it gives me this: http://i...   Feb 22 2009, 01:46 PM
pandy   There must still be a little gap and some backgrou...   Feb 22 2009, 02:04 PM
Dejan   Done, Starting to look better but not perfect as i...   Feb 22 2009, 02:59 PM
pandy   There's still a blue color there... I don...   Feb 22 2009, 03:07 PM
pandy   Try this. No gaps in IE, right? <!DOCTYPE ...   Feb 22 2009, 03:59 PM
Dejan   Try this. No gaps in IE, right? nope... no gap...   Feb 22 2009, 05:15 PM
Frederiek   Isn't it simply because you specified a border...   Feb 23 2009, 04:50 AM
Dejan   Isn't it simply because you specified a borde...   Feb 23 2009, 10:34 AM
Frederiek   That depends on which color you want to remove. T...   Feb 24 2009, 04:18 AM
Dejan   i want the blue line to be removed..(only seeing i...   Feb 24 2009, 04:54 AM
Frederiek   Then simply get rid of the border-bottom rule of #...   Feb 24 2009, 08:24 AM
Dejan   i have another question. Im currently making anoth...   Feb 24 2009, 09:48 AM
Darin McGrew   Why do you need to use any height? Why can't y...   Feb 24 2009, 12:17 PM
Dejan   http://img15.imageshack.us/img15/6704/height.jpg ...   Feb 25 2009, 05:36 AM
Dejan   ???   Feb 28 2009, 08:06 AM
Darin McGrew   I'm still not sure what you're trying to d...   Feb 28 2009, 09:57 PM
Dejan   heya sorry guys for my long time being offline, h...   Mar 17 2009, 12:45 PM
pandy   Fix the errors to start with. http://www.htmlhelp...   Mar 17 2009, 11:57 PM
Dejan   Thanks for your respond paddy. I fixed all the er...   Mar 18 2009, 09:04 AM
pandy   Because of this. If you had kept the text-decorati...   Mar 18 2009, 09:58 AM
pandy   Again, this is why it's a bad idea to fix the ...   Mar 18 2009, 10:33 AM
Dejan   but how must i do it then without giving sizes to ...   Mar 18 2009, 11:32 AM
pandy   If you want it to look exactly like that, you have...   Mar 18 2009, 01:41 PM
pandy   For example non-repeating top and bottom parts an...   Mar 18 2009, 02:40 PM
pandy   I see now that I maybe didn't pick the best bi...   Mar 18 2009, 02:54 PM
pandy   Use the borders with these containers too and fix...   Mar 18 2009, 04:07 PM
Frederiek   This is all you need in the <body> tag: ...   Mar 18 2009, 01:47 PM
Darin McGrew   <div id="header"> <p>HE...   Mar 18 2009, 02:16 PM
Dejan   Thanks for your work pandy, appreciate it alot So...   Mar 18 2009, 03:44 PM
pandy   You're welcome. ^_^ Both wrappers expand an...   Mar 18 2009, 04:01 PM
Dejan   Thanks pandy for the help!! Another quest...   Mar 19 2009, 12:42 PM
Frederiek   That's a matter of taste, really. Post the url...   Mar 19 2009, 03:57 PM
pandy   I forgot to say this earlier. You use 'groove...   Mar 19 2009, 04:48 PM
Frederiek   Correct. Nonetheless, even with a 2px groove bord...   Mar 20 2009, 03:12 AM
Dejan   Sorry but here I am again... hehehehe I changed th...   Mar 23 2009, 02:33 PM
pandy   Yeah, it's a really stupid mistake! :angry...   Mar 23 2009, 02:49 PM
Darin McGrew   The background color for div#wrapper-2 covers the ...   Mar 23 2009, 02:50 PM
pandy   Yeah, rub it in. I deserve it. :rolleyes: :P   Mar 23 2009, 02:51 PM
Dejan   so there is no way possible to make it with the 2 ...   Mar 23 2009, 04:14 PM
Darin McGrew   Sure you can. You just need to use a transparent b...   Mar 23 2009, 04:18 PM
Dejan   yeah sorry dumb question, :P removed the backgroun...   Mar 23 2009, 04:26 PM
pandy   Hope you weren't trying to get it to work for ...   Mar 23 2009, 04:52 PM
Dejan   hehe im trying to finish this site for a long time...   Mar 24 2009, 11:04 AM
pandy   That's good. I'll try not to make dumb mis...   Mar 24 2009, 03:08 PM
Dejan   im trying to make a menu sort of like this: http:...   Mar 28 2009, 02:59 PM
Dejan   and btw.. does anyone haves a program/site where i...   Mar 28 2009, 03:48 PM
pandy   Most image editors can tell you that. Look around ...   Mar 28 2009, 03:58 PM
Dejan   wohaaa.... that menu is almost impossible to make....   Mar 28 2009, 04:24 PM
Frederiek   http://kuler.adobe.com/ You can upload images ther...   Mar 28 2009, 05:38 PM
Dejan   http://smitska.woelmuis.nl/menutest.html just suc...   Apr 1 2009, 08:33 AM
Darin McGrew   Can you be more specific? What do you want the men...   Apr 1 2009, 10:51 AM
Frederiek   The markup for the menu looks good. So, like Darin...   Apr 1 2009, 12:32 PM
pandy   The difference between IE and FF is partly because...   Apr 1 2009, 01:02 PM
Dejan   heya guys.. sorry long time no see, hehe.. im v...   Apr 21 2009, 01:19 PM


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:26 AM