The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

5 Pages V  1 2 3 > »   
Reply to this topicStart new topic
> 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
Dejan
post Jan 14 2009, 12:25 PM
Post #2


Member
***

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



screenshots:

Wrong:(internet explorer)
IPB Image

right:(opera)
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 14 2009, 12:29 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,257
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 14 2009, 02:48 PM
Post #4


Member
***

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



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 14 2009, 03:06 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,257
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
what do u mean with triggering quirks mode?
See Activating Browser Modes with Doctype.

QUOTE
how can i just the font to opera AND msie?
See Adjusting your text size.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 15 2009, 11:22 AM
Post #6


Member
***

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



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 15 2009, 12:02 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,257
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Can you provide the URL (address) of a document that demonstrates the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 15 2009, 01:29 PM
Post #8


Member
***

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



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 19 2009, 11:01 AM
Post #9


Member
***

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



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 19 2009, 11:23 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,257
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



URL?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 19 2009, 05:33 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 25 2009, 06:29 AM
Post #12


Member
***

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



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 25 2009, 06:51 AM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,766
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 25 2009, 10:32 AM
Post #14


Member
***

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



sorry my english is not the best.
Can u be more specific Pandy?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 25 2009, 11:06 AM
Post #15


.
********

Group: WDG Moderators
Posts: 7,728
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
pandy
post Jan 25 2009, 11:50 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,766
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 26 2009, 12:16 PM
Post #17


Member
***

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



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:)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 26 2009, 12:28 PM
Post #18


.
********

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



I tried re-phrasing my previous post. If that doesn't help, please tell which part you don't understand. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dejan
post Jan 26 2009, 03:34 PM
Post #19


Member
***

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



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 :$
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 26 2009, 06:08 PM
Post #20


.
********

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



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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

5 Pages V  1 2 3 > » 
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: 20th November 2017 - 06:38 AM