|
CSS - For Some Reason, Script Works Fine In Firfox But Not In Ie Unless I Use Doctype
Hello.
I am using a percentage bar javascript code on my website, the problem is, The script works fine in FireFox without adding: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But only works in IE if I add that code. The problem is, when I do add that code some of my tables go twice the size in height. What is the problem here? Is this going to be easy to fix? What can I do? Thanks a lot, Ben Similar TutorialsI added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ I am trying to center an inline list navigation inside the div. I think I got it. It works in FF, Safari, Opera but there is an extra space in IE therefore it does not center correctly. Here is the URL http://holzgreen.com/gap/gap_sun_catchers.html Here is the CSS .gapLayout #kit_groupPerfect ul { display:inline-block; list-style:none; padding:0px; margin:10px 0 0 0; height: 23px; text-align: center; border: 1px solid #666666; } .gapLayout #kit_groupPerfect ul li { float:left; margin: 0px 7px 0 7px; text-align:center; font: bold 11px arial, verdana, sans-serif; height: 11px; padding: 5px 5px 6px 5px; background-color: #EEE; } As always, any suggestion will be appreciated. sukruB I dont get why but codes below work fine with firefox but in IE image overflows from <li> area. How can I fix it? Code:
<style>
#splitcontentright {
float:right;
margin:2px;
width:346px;
height:225px;
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#splitcontentright h1 {
padding:0px;
margin:0px;
font-size:14px;
font-weight:bold;
background-color:inherit;
color:#FFFFFF;
}
#splitcontentright .news img {
float:left;
height:60px;
width:60px;
margin:4px 4px 4px 4px;
}
#splitcontentright .news{
border-top:none;
background-color:#e8e8e8;
margin:0;
}
#splitcontentright .news li a{
display:block;
text-decoration:none;
padding:0px;
color:#000000;
border-top:#FFFFFF 1px solid;
}
#splitcontentright .news li a:hover{
background-color:#FFFFFF;
}
</style>
<div id="splitcontentright">
<h1>News Headlines</h1>
<ul class="news">
<li><a href="#"><img src="images/nheadlines_pic.jpg" class="news" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
<li><a href="#">2Lorem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">L3orem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lore6m ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lo4rem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
</ul>
</div>
Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html Any help pointing me in the right direction will earn you a friend for life. (The relevant subset of my) website is he http://www.smoli.com (URL address blocked: See forum rules) It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...). Everything works fine in: - Preview from within FP. - IE8 and IE9 - Latest version of Chrome. But not with Firefox (latest version). Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place". I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules) Any idea what is causing the incompatibility? Many thanks. Re-coding a site I designed to follow web-standards and having a small problem with a gap in ie. Page-template Page is working fine in firefox, but in internet explorer the "content" div is getting pushed down from the "framemain" div. I set padding and margin all to 0 and that didn't help. I could get around this if I abs position my nav, but I'd rather do it this way. Any thoughts or help appreciated. My web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution. egoboosters . org / newindex1 . htm I have a three column layout (25%, 50%, 25%) which works fine in IE7 and firefox but not IE6. In IE6 the right column rolls down (would not fit in the space). What would be the best fix for this issue ? Here is my CSS. #main3Column { float: left; width: 50%; } #leftColumn { /* IE7 1px rounding error */ float:left; width:25%; margin-left:-1px; } #rightColumn { float:left; width:25%; } .columnBoxLeft { padding: 0px 0px 0px 6px; margin: 5px 0px 5px 0px; } .columnBoxMiddle { padding: 0px 5px 0px 5px; margin: 5px 0px 5px 0px; } .columnBoxRight { padding: 0px 5px 0px 0px; margin: 5px 0px 5px 0px; } HTML ==== <div id="leftColumn"> <div class="columnBoxLeft"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div> </div> <div id="main3Column"> <div class="columnBoxMiddle"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div> </div> <div id="rightColumn"> <div class="columnBoxRight"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div> </div> if you take a look at http://www.cherrysociety.com/mag/art/ you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong? the css is at http://www.cherrysociety.com/mag/style.css thanks guys, i appreciate it a lot. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! Hello! I've got two simple files ... one XML and the formatting CSS: Code:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type='text/css' href='test01.css'?>
<doc>
<p>Some text...</p>
<p asdf="note">A note...</p>
<safe xml:id='s1'>
asdf
</safe>
</doc>
Code:
doc {display: block; }
p { display: block; }
p[asdf="note"]{ color: red;
background:black;}
safe { display: none; }
My problem is, that within IE8 the Information about p[asdf="note"] is ignored. In Firefox everthing is formatted well. As I'm quite new to CSS maybe I'm missing something significant? Any help would be great! thx Hi folks, I have a website at www.irish-guy.com . Its showed fine with a white background on Explorer and black text when I created in on Windows. I when moved to Mac G4. It was also fine on Safari.....but on Firefox, it had white text and a white background. So I could not read anything. I ahve tried changing the BG Colour to blue (its back white again). When i chaged it to various colors (for example blue) the following happened. (1) Its blue BG and black text on Safari. (2) Its gray BG and black text on Explorer (when viewed on a Mac). (3) Its gray BG and black text on Firefox (except within the picture boxes where its white text). Unreadable. My question is (CSS below), how do i get a white background and black text on all three browsers. Or if you are reading this on Firefox on a Windows machine, how does it read? P.S I am begiining to wonder if the external CSS on my WWW tagboard is overriding the background on my post page! Regards Michael Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <style type="text/css" media="screen" /> /*----start mash up-----------------------------------------------------------*/ /*----start ruthsarian layout-------------------------------------------------*/ #pageWrapper { margin: 0; width: auto; min-width: 500px; border-color: black; border-style: solid; /* explicitly defined within eact selector in case you want change border styles (to mix it up) between elements */ border-width: 1px; /* puts a border around the whole page */ } body { background-color: gray; color: white; margin: 0; padding: 2em; } body { font-family: arial, helvetica, sans-serif; font-size : x-small; voice-family : "\"}\""; voice-family : inherit; font-size : small; } #masthead { background-color: gray; color: black; border-color: black; border-style: solid; border-width: 0 0 1px 0; padding: 1em; } #masthead h1 { display: inline; /* personal preference to keep the header inline. you could just as easily change padding and margins to 0. */ } #outerColumnContainer { z-index: 1; border-left-color: silver; /* left hand column background color */ border-right-color: blue; /* right hand column background color */ background-color: white; /* this sets the background color on the center column */ color: #111111; border-style: solid; border-width: 0 0 0 200px; /* sets the width of the borders used to create the left and right columns' background color. */ /* border-width: 0 200px; */ /* for three columns */ } #innerColumnContainer { z-index: 2; margin: 0 -1px; width: 100%; border-color: black; border-style: solid; border-width: 0 0 0 1px; /* puts borders between center and the side columns */ /* border-width: 0 1px; */ /* for three columns */ } #contentColumn { margin: 0 -1px; width: 100%; float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ color: black; } #leftColumn { float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ width: 200px; margin: 0 1px 0 -200px; color: black; text-align: center; } #rightColumn { float: left; position: relative; z-index: 10; overflow: visible; /* fix for IE italics bug */ width: 200px; margin: 0 -200px 0 1px; display: none; /* comment this out and edit borders.css to create the third column */ color: black; } #footer { position: relative; background-color: blue; color: white; border-color: black; border-style: solid; border-width: 1px 0 0 0; text-align: center; padding: 1em; } .clear { clear: both; } .hide { display: none; /* hide elements that CSS-targeted browsers shouldn't show */ } .inside { padding: 0.5em 1.5em; /* this padding is applied to every major box within the layout for a uniform gutter between borders */ } html>body #innerColumnContainer { border-bottom: 1px solid transparent; /* help mozilla render borders and colors. try removing this line and see what happens */ } /*----start vertical nav------------------------------------------------------*/ .vnav { margin: 1em 0; } .vnav ul { margin: 0; padding: 0; list-style-type: none; display: block; border: solid 1px black; border-bottom-width: 0; } .vnav ul li { margin: 0; padding: 0; list-style-type: none; display: block; border-bottom: solid 1px black; } .vnav ul li a { display: block; text-decoration: none; padding: 2px 10px; color: black; background-color: white; } .vnav ul li a:hover { background-color: black; color: white; } .vnav h3 { margin-bottom: 0; padding-bottom: 0; } * html .vnav { position: relative; /* IE needs this to fix a rendering problem */ } * html .vnav ul li a {/* hide from IE5.0/Win & IE5/Mac */ height: 1%; } #rightColumn .vnav ul li a { color: black; background-color: white; } #rightColumn .vnav ul li a:hover { background-color: black; color: white; } /*--------------------------------------------------------end vertical nav----*/ /*----start horizontal nav bar------------------------------------------------*/ .hnav { white-space: nowrap; margin: 0; color: black; padding: 3px 0 4px 0; background-color: blue; color: black; border-color: black; border-style: solid; border-width: 0 0 1px 0; } .hnav ul { text-align: center; list-style-type: none; line-height: normal; margin: 0; padding: 0; } .hnav ul li { display: inline; white-space: nowrap; margin: 0; } .hnav ul li a { text-decoration: none; color: black; background-color: yellow; margin: 0 -1px 0 0; padding: 3px 10px 4px 10px; border-left: solid 1px black; border-right: solid 1px black; } .hnav ul li a:hover { text-decoration: underline; background-color: black; color: yellow; } * html .hnav {/* Hide from IE5/Mac (& IE5.0/Win) */ height: 1%; /* holly hack to fix a render bug in IE6/Win */ } } /*--------------------------------------------------end horizontal nav bar----*/ /*----start screen.css---------------------------------------------------------- @import "base.css"; @import "hnav.css"; @import "vnav.css"; @import "colors.css"; @import "gutters.css"; @import "borders.css"; @import "fonts.css"; ------------------------------------------------------------end screen.css----*/ /*---------------------------------------------------end ruthsarian layout----*/ /*----start minima template---------------------------------------------------*/ a:link { color: blue; text-decoration:underline; } a:visited { color: purple; text-decoration:underline; } a:hover { color: red; text-decoration:underline; } a img { border-width:0; } /*----Header------------------------------------------------------------------*/ #masthead h1 a { color: black; text-decoration:none; } #masthead h1 a:hover { color: silver; } #description { display:inline; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.2em; color: silver; text-align: right; } /* Headings----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.2em; color: black; } /* Posts----------------------------------------------- */ .date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px solid black; padding-bottom:1.5em; } .post-title { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color: red; } .post-title a { display:block; text-decoration:none; color: lightgrey; font-weight:normal; } .post-title a:visited { display:block; text-decoration: underline; color: green; font-weight:normal; } .post-title strong { display:block; text-decoration:none; color: yellow; font-weight:normal; } .post-title a:hover { color: silver; } .post p { margin:0 0 .75em; line-height:1.6em; } p.post-footer { margin:-.25em 0 0; color: silver; } .post-footer em { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; font-style:normal; color: darkgray; margin-right:.6em; } .comment-link { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; margin-left:.6em; } .img { padding:5px; background:gold; border:1px solid black; } .post blockquote { border: 1px dashed black; background:gold; font-size: 10px; color:#666; font-family:verdana, arial, sans-serif; padding:8px; } .post blockquote p { margin:.75em 0; } /*----start Sidebar Content---------------------------------------------------*/ #sidebar ul { margin:0 0 1.5em; padding:0 0 1.5em; border-bottom:1px solid black; list-style:none; } #sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; } #sidebar p { color: darkgray; line-height:1.5em; } /*----start Profile-----------------------------------------------------------*/ #profile-container { margin:0 0 1.5em; border-bottom:1px solid black; padding-bottom:1.5em; } .profile-datablock { margin:.5em 0 .5em; } .profile-img { display:inline; } .profile-img img { float:left; padding:4px; border:1px solid black; margin:0 8px 3px 0; } .profile-data { margin:0; font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; } .profile-data strong { display:none; } .profile-textblock { margin:0 0 .5em; } .profile-link { margin:0; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.1em; } http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
For some reason my code adds a vertical scrollbar in firefox (although not in IE but you can make anything work in IE). I am not sure why. The scroll amount is only 1 pixel vertically. Everything looks good to me. Any ideas? PHP Code: <style type="text/css"> <!-- html {height:100%;} body { margin:0; padding:0; height:100%; background:#ffffff url(bg.gif) top right repeat-y; font-family:Papyrus, Rockwell, Poor Richard, Times New Roman, serif; } #wrap { position:relative; background:url(bg.gif) top left repeat-y; min-height:100%; } * html #wrap {height:100%} #clear_footer { clear:both; height:19px; overflow:hidden; } #footer_full_width { position:absolute; bottom:0; height:19px; background-image: url(../images/bottomredstripe.jpg); width:100%; color:#fff; background-color: #999; text-align:center; } #footer_panel { position:relative; bottom:0; height:19px; background-image: url(../images/gray_bottom.jpg); width:730px; height: 19px; color:#fff; background-color: #999; text-align:center; } #left { float:left; width:200px; text-align:center; } #main { position:relative; margin-left:200px; } #right { float:right; width:200px; text-align:center; } #content { padding:5px; margin-right:200px; text-align:left; } * html #content, * html #main { height:1px; } --> </style> <div id="wrap"> <div id="header">header</div> <div id="left">left</div> <div id="main"> <div id="right">right</div> <div id="content">main content</div> </div> <div id="clear_footer"></div> <div id="footer_full_width"> <div id="footer_panel">FOOTER</div> </div> </div> Code on the page: Code: <body> <div class="wrapper_page"> <div class="wrapper_widebackground"> <div class="wrapper_body"> <div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div> <div class="wrapper_nav_top"><!-- navbar goes here --></div> <div class="wrapper_main"> <div class="wrapper_main_insidebackground_blue"> <div class="wrapper_main_insidebackground_white"> <div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div> <div class="wrapper_main_content"> <div class="wrapper_main_sword"> <!-- Content here --> </div> </div> </div> </div> </div> </div> </div> </div> </body> Stylesheet: Code:
.wrapper_page {
text-align: center;
width: 100%;
border: 0px solid #FFFF00;
}
.wrapper_widebackground {
background-image: url(../Cloth.png);
width: 1350px;
background-repeat: no-repeat;
margin: auto;
clear: both;
border: 0px solid #FF0000;
}
.wrapper_body {
text-align: left;
margin: auto;
clear: both;
width: 1000px;
border: 0px solid #FF00FF;
padding: 0px;
}
.wrapper_head {
height: 182px;
width: 1000px;
border: 0px solid #33FF00;
margin: 0px;
padding: 0px;
}
.wrapper_nav_top {
height: 24px;
width: 1000px;
border: 0px solid #FFFF00;
margin: 0px;
padding: 0px;
}
.wrapper_main {
background-color: #000000;
background-image: url(../background.jpg);
margin: auto;
padding: 0px;
background-position: top;
background-repeat: repeat;
clear: both;
border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
background-repeat: no-repeat;
background-image: url(..Blue.jpg);
background-position: top;
background-color: #000000;
}
.wrapper_main_insidebackground_white {
background-repeat: repeat-y;
background-image: url(..White.png);
background-position: top;
}
.wrapper_main_top {
border: 0px solid #00FF00;
height: 35px;
width: 1000px;
margin: 0px;
padding: 0px;
clear: both;
}
.wrapper_main_sword {
background-image: url(../Sword.png);
background-repeat: no-repeat;
background-position: right top;
vertical-align: top;
padding: 0px;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #FF33CC;
}
.wrapper_main_content {
border: 0px solid #FF9900;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 90px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a bottom margin whether I put a bottom margin of 0 there or not. (Currently, it is set to auto.) I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work. Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border. (I'd give you the URL, but the forums wouldn't allow it.) Why is this happening and how do I remedy it? For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out. Here is the site university square condos (dot) com Any idea where I could be going wrong? Hi guys, I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout. I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following: Code: html, body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
background-color: #000000;
}
Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know! I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed. Thanks everyone! I know this may sound a stupid question. However I have been reading about XHTML and CSS for these last few weeks. From what I understand a DocType is there to determine if an XHTML document is well-formed. Therefore from my understanding the DocType should have not be related with CSS. However today I wrote the following peace of code: Code: <html>
<head>
<title>Test</title>
<style>
div > span { color: red; }
</style>
</head>
<body>
<div><p>
<span>hello</span>
</p><span>World!!</span>
</div>
</body>
</html>
On Internet Explorer 7 it did not work since 'Hello World!!' was writen all in black. However on Firefox it worked fine since 'World!!' was correctly displayed in red. Then I added the Strict DocType to the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... and it started working on Internet Explorer 7 as well! Now I am glad that it worked on Internet Explorer 7 when using the DocType (Strict). However isn't this wrong? I mean shouldn't this just work without the DocType since it is CSS related and not XHTML? I am very new to all this and I understand that I may be missin something here! However I would be very greatfull if someone could explain me if this behavior from Internet Explorer 7 is correct or not! Thanks and Regards, Sim085 Hello, I am trying to make my webpage, www.jwwebdesign.info, W3 Valid. However, when I insert: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> at the top of the page, and try to vaildate, it does not like my <table height="100%"> What is a CSS alternative I can use so that I can validate my page (height: 100% won't work). Thanks, Jeff |
|||||||