|
CSS - Quirks Or Strict? Html Or Xhtml? For Best Browser Compatibility...
quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html?
my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility? Similar TutorialsHi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S I usually build in XHTML Traditional, and modify via CSS... but i want to learn how to build in XHTML strict.. and practice i notice is putting data in ul lists... which when the css is taken off, gives quite a nice structured layout of text and such... problem is, i dont know how to do it to where the "dot" doesnt show up... anyhelp would be great. thanks So my page is valid strict xhtml 1.0, and valid css 2, yet it looks so messed up in FF. I can't figure out why. http://www.drowninginmytears.org/index.php It looks perfect in IE, but totally messed up in FF Can anyone help? Thanks. Is there an equivalent to the target attribute in XHTML strict for anchor tags? I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand. In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org). <table><tr><td> <!-- simplified to illustrate!! --> <form method="get" action="..." style="display:inline;"> <input type="text" name="q" size="10" maxlength="255" value="" /> <input type="submit" name="sa" value="go" /> </form> </td></tr></table> The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>). *** document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). *** Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code? I've been making ok progress with CSS (thanks to your help ) but have come up with a problem when wanting to embed a flash movie into my webpage. How do i do it using CSS? the follwing Html code works fine but fails upon validation. Code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300>
<param name="movie" value="flash/home.swf">
<param name="quality" value="high"><param name="BGCOLOR" value="#A1D7FD">
<embed src="fighter.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#A1D7FD"></embed></object>
Any help is appreciated. Also - is it a bad idea including small intro flash movies for webpages? any help is appreciated I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
Hi! How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden). Thank you http://warcraftpress.com/index.php (If it displays a whitepage, revisit the link again) Working on browser compatibility, and well, IE is a stubborn one, yes? For some reason, it places post areas below the right menu, as well as some spacing issues. I've checked in FireFox 3 (which I designed in), Safari, and Opera, but only IE does this issue. (IE7, I mean. I no longer care to support IE6) One other thing I see is the menu items's arrow graphic cuts off in other browsers, I'd say it has to do with the height and other specifications in the CSS, but I do make a mess to try and make something work :P The big arrow graphic (the normal) is at a height of 22, while the small (sub menu) one is 18. Both are in pixel measurements. Thanks a lot in advance for the help! You can find the stylesheet he http://warcraftpress.com/wp-content/themes/default/style.css I've decided to make a thread to ask for help on my journey of recoding my design to CSS/XHTML tableless. I understand you all do this out of the goodness of your hearts, so I hope you don't take this as a "I demand assistance" thing. (original layout -> Here ) http://www.gaminghybrid.com/wii-style.html The current issue is the menu items. In FireFox 2, it looks perfect. The right proportions and everything. However, in IE7, between the menu header and the first menu item, there is some strange spacing. What could be causing this? For now, all my CSS is on the page, where I'll have it be in a CSS file once I've completed. Thanks in advance It's about time I moved away from the incorrect table layouts and help contribute to a better web. Hi, I haven't worked with CSS since before the whole Firefox craze and I'm having some compatibility issues when it comes to getting my website to work properly in both IE, Firefox and Safari. I was able to achieve the perfect layout in IE but Firefox and Safari just throw it all out of whack. Are there way to ensure the same output (like linking to W3C or something) or perhaps I'm just doing something wrong. I've posted my code and you can see the difference I'm talking about in both browsers. 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=ISO-8859-1" />
<style type="text/css">
<!--
/* GRID PLACEMENT */
html, body {
height:100%;
text-align:center;
margin:0;
padding:0;
}
div {
display:block;
}
div#holder {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
}
div#links {
width:inherit;
}
div#page {
border:2px #4a86b2 solid;
width:inherit;
height:inherit;
padding:1px;
}
div#page div {
width:inherit;
}
div#header {
height:75px;
}
div#divider {
height:20px;
}
div#content {
height:80%;
}
div.left {
height:100%;
float:left;
width:180px;
border:1px white solid;
}
div.right {
height:100%;
float:right;
width:610px;
border:1px white solid;
}
div#footer {
height:20px;
border:1px white solid;
}
/* GRID COLORS */
div#header, div#footer {
background:#000066;
}
div#divider {
background:#6392e6;
}
div#content div.left {
background:#a5be00;
}
-->
</style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="divider">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="content">
<div class="left">1</div>
<div class="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
Hi, I'm having a browser compatibility issue that I'm hoping someone can help me with. This image rollover code shows up fine in IE 7, but not in Firefox. Any simple solutions? Is this because I'm using a table? I'd much appreciate any help! I've included the HTML and CSS below: Thanks for any assistance! darleen HTML************ Code: <div id="menu"> <center> <table border="0"> <tr> <td><a href="exsum.html" class="sprite1"></a></td> <td><a href="need.html" class="sprite2"></a></td> <td><a href="progcon.html" class="sprite3"></a></td> <td><a href="progfac.html" class="sprite4"></a></td> <td><a href="budget.html" class="sprite5"></a></td> <td><a href="protim.html" class="sprite6"></a></td> </tr> </table> </center> </div><!--end menu div--> PART OF CSS***************** Code: /*
* START ROLLOVER MAIN PAGE
*/
<!-- 1red -->
a:link.sprite1, a:visited.sprite1{
background:url(images/red3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite1{
background-position:0px 0px;
}
<!-- end 1red -->
a{background:url(../Image/background.gif);}
a:hover{background-position:-50px 0px;}
<!-- 2orange -->
a:link.sprite2, a:visited.sprite2{
background:url(images/orange3.jpg) no-repeat center;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite2{
background-position:0px 0px;
}
<!-- end 2orange -->
<!-- 3yellow -->
a:link.sprite3, a:visited.sprite3{
background:url(images/yellow3.jpg) no-repeat top left;
background-position:-127px 0px;
width:124px;
height:500px;
display:block;
}
a:hover.sprite3{
background-position:0px 0px;
}
<!-- end 3yellow -->
<!-- 4green -->
a:link.sprite4, a:visited.sprite4{
background:url(images/green3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite4{
background-position:0px 0px;
}
<!-- end 4green -->
<!-- 5blue -->
a:link.sprite5, a:visited.sprite5{
background:url(images/blue3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite5{
background-position:0px 0px;
}
<!-- end 5blue -->
<!-- 6purple -->
a:link.sprite6, a:visited.sprite6{
background:url(images/purple3.jpg) no-repeat top left;
background-position:-127px 0px;
width:127px;
height:500px;
display:block;
}
a:hover.sprite6{
background-position:0px 0px;
}
<!-- end 6purple -->
/*
* END ROLLOVER MAIN PAGE
*/
Ive been searching for about 2 days now for a CSS browser compatibility chart that includes Ffirefox and IE. Every time I think ive found a good one it turns out to be a dead link or theres no chart there. I keep finding links to the "Full CSS Property Compatibility Chart", supposed to be located he http://corecss.com/properties/full-chart.php but it just redirects you to a main page with no chart. Do any of you know any good charts that tell you what CSS tags work for firefox and IE? Well actually all I need is one that features firefox then I can compare it to one with internet explorer. Thanks in advance to anyone that can help. Hello, newbie he I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome! http://www.manplusrocks.com/MAVIN/template.html http://www.manplusrocks.com/MAVIN/css/mavin.css The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue... Any comments would be greatly appreciated, thanks! Hello all. I was hoping someone could answer what is hopefully a simple problem and provide and equally simple solution but anything will be appreciated! The problem: I have created a border in a stylesheet (already tested and no issues there) code: table.outset { border-width: 8px; border-style: outset; border-color: #c94066 #c94066 #A9A9A9 #A9A9A9; } called in the body of the code by: <table class="outset" ......> Now, this renders perfectly in IE (at least 7) but fails in Firefox and Safari. It appears that in FF and Safari these browsers completely disregard the chosen colors and outset style (FF and Safari give a border with four solid and separate colors). IE does a great job but I would like to make this compatible with the rest. Is this even possible (i.e. coding issue)? Or, does anyone have any other suggestions as to creating a 3D effect around a table in Dreamweaver CS3? I have searched for and used various codes offered on the web and nothing has worked as well as this simple outset property. Any suggestions?! Hello, I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it?? I am also looking for someone to help me in the future for website design, recommendations appreciated. signature sound .com under "training" and "workshops" If there is anymore information needed to help me I will provide. extra info: I cleared floats within HTML and not within CSS. Here is some CSS for the training page: #song-logo { margin:35px 0px 0px 44px; } #discover-songlist1 { margin:0px 40px 0 50px; float:left; } #discover-info { float:left; width:500px; margin:-36px 0px 0px 130px; } #song-pictures { margin:-65px 48px 0px 0px; } #more-info { margin: -30px 0px 0px 45px } #record-logo { margin:55px 0px 0px 44px; } #discover-recordlist2 { margin:0 143px 0 50px; float:left; } #discover-every { width:500px; float:left; margin:-36px 0px 0px 62px; } #record-pictures { margin:-65px 55px 0px 0px; } #more-info2 { margin: -30px 0px 0px 45px } #discover-list3 { width:460px; float:left; margin:50px 0 0 50px; } Hi, I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox. Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't. My question is would I be better developing separate CSS files for each browser type and use a script to determine which one? If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful. Regards Paul Is there any way to center a <div> block itself, not the text in it? Using this code:
Code: #block{
padding:2px;
margin-left:auto;
margin-right:auto;
width: 480px;
}
(which I am currently using) centers it in Firefox, but not IE. Also the code which adds a rollover effect to the links in the menu works in Firefox but not IE. Code: #menu li:hover{
background-color:#369;
}
The site's current URL is here, because my webhost's disk is full, and they are having problems with PHP scripts not working. I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. I'm working on a little project here, trying to design a table-less page using XHTML and style sheets. The first version worked only in IE, Mozilla and Opera didn't display them the way I wanted to. So I rebuilt the stylesheet from scratch with cross-browser compatibility in mind and it sort of works in all three browsers, except for one little bit: http://gosh.ex.ac.uk/~cs01kb/lg_sample/ Stylesheet: http://gosh.ex.ac.uk/~cs01kb/lg_sample/css/main.css IE6 and Opera 7 correctly display the little bar at the bottom with all the links, but Mozilla Firefox 0.8 doesn't - it displays it under the two main content boxes. I'm just out of ideas on how to try and make it work, it should be so simple. Any help on how to get around it would be appreciated. P.S.: If you're using any other browser out there (especially on a Mac) just a quick note or a screenie of what the page looks like would be nice... thanks! |
|||||||