|
CSS - Ie 7 Beta 2 And Css Support
Just a small ramble...
About 2 or 3 weeks ago I finally installed IE 7 Beta 2 to give it a test drive to see how MS was coming along in their CSS support... Before I go any further, let it be known: I ALWAYS develop in Firefox and correct for IE ... Anywhoo, I was in the middle of this large project for my client and much to my surprise, MS has come a very loooong way in supporting CSS; so much so I couldn't tell ANY difference between Firefox 1.5 and IE7...seriously. I know MS still hasn't given into standards 100% with IE7 and IE7 is still along way off of having the marketshare IE6 has right now, but I was soooo thrilled I just wanted to drop everyone a line here and share my joy! IE7 Beta 2 Download Link Similar TutorialsI have created a simple css and I notice that when the html page is opened by IE and NN my text-decoration: none seems to have no effect on the links. When I use Opera it works well. Is it my code or do you have to do something else as the text I'm working from says > and + support is not uniform? div.navbar { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; } div.navbar > span.self { font-weight: bold; color: #c80; padding: 3px; } div.navbar > a:link { padding: 3px; color: #300; text-decoration: none; } div.navbar > a:hover { background-color: #eb0; color: #200; padding: 3px; text-decoration: none } I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ? just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code:
<div id='leftcolumnmenusouter'><!-- left column menus -->
<div id='leftcolumnmenus'>
<?php include "columnmenus.php"; ?>
</div>
</div>
<div id='maincontentcolumnouter'><!-- middle column -->
<div id='maincontentcolumn'>
<?php
if (is("home")) {
include "home.php";
} else if (is("register")) {
include "register.php";
} else if (is("login")) {
include "login.php";
} else if (is("comment")) {
include "comment.php";
} else if (is("profile")) {
include "profile.php";
} else if (is("category")) {
include "category.php";
} else if (is("game")) {
include "game.php";
} else if (is("links")) {
include "links.php";
} else if (is("rules")) {
include "rules.php";
} else if (is("faq")) {
include "faq.php";
} else if (is("pp")) {
include "pp.php";
} else if (is("links")) {
include "links.php";
} else if (is("page")) {
include "page.php";
} else if (is("news")) {
include "news.php";
} else if (is("users")) {
include "users.php";
} else if (is("search")) {
include "search.php";
} else if (is("taf")) {
include "taf.php";
} /*else if (is("submit")) {
include "submit.php";
} */else if (is("pm")) {
include "pm.php";
} else if (is("play")) {
include "play.php";
} else if (is("request")) {
include "request.php";
} else if (is("contact")) {
include "contact.php";
} else {
include "error.php";
}
?>
</div>
</div>
CSS: Code: #maincontentcolumnouter {
width:75%;
margin:0px;
float:left;
}
#maincontentcolumn {
margin-top:8px;
margin-bottom:0px;
margin-left:4px;
margin-right:8px;
}
#maincontentcolumn .ocontentsection {
margin-bottom:8px;
}
#maincontentcolumn h2 {
text-indent:1em;
}
#leftcolumnmenusouter {
width:25%;
margin:0px;
float:left;
}
#leftcolumnmenusouter #leftcolumnmenus {
margin-top:8px;
margin-bottom:0px;
margin-left:8px;
margin-right:4px;
}
#leftcolumnmenus .ocontentsection{
margin-bottom:8px;
}
#leftcolumnmenus h2{
text-align:center;
}
#footer {
margin:0px;
padding:0px;
clear:both;
}
Just curious if anyone has any resources that explain what type of overflow attributes Opera supports. I'm working on a site right now and see that in Opera "overflow: auto" is not supported. Is there a known work around? I am using Opera 9.25 Thanks! HI; Does the hover not support for the IE browser ? I am using a hover for buttons in IE browser, it does not has any reaction when the cursor is held over the buttons, but it does work in the Firefox, Netscape, and Opera browser. Could any one tell me why ? Thanks. My code as following; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" >
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin:0;
}
#container{
position: relative;
width: 780px;
w\idth: 780px;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
table {
position: absolute;
width: 700px;
margin: auto;
}
table td {
background: url(mybutton1.jpg);
background-repeat: no-repeat;
background-position: center;
width: 150px;
height: 50px;
text-align: center;
font-size: 20px;
color: white;
}
table td:hover {
background: url(mybutton2.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="container">
<table>
<tr>
<td> Home </td> <td> About Us </td> <td> Contact Us </td> <td> Help </td>
</tr>
</table>
</div>
</body>
</html>
Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks This is frusteratung me so much... yet again I'm back because IE does not respond properly. Here is the page: tri-m.com/index_jan_newFproduct.html Please don't tell me I should validate first because I know validating is not the problem here and I will be validating after I fix this. The problem is in the Join the Mailing List section. The image behind the form field moves when you restore down from being maximized and you resize the page up and down. In IE the image moves but in FF the image is static. The solution is probally quite simple but I'm so flustered right now that I'm not able to come up with the solution. If someone could help me that would be wonderful and greatly apperciated. - Jacenta I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! I am working on a header for a site and am having trouble with cross-browser support for one element. I have kept all of the CSS in the html page for testing purposes. The problem I'm having is that in FF and IE6, I am having difficulty getting the #menuBar, .filmstripTop, #menuChoices, and .filmstripBottom elements to align on top of each other, despite margins, padding, etc. set to 0. (I have set the background of #menuBar to yellow so you can see what I think is the offending element.) In FF and IE6, I see the yellow running across the screen but in different places. In IE running under Windows Vista, everything appears aligned as intended. (The menu text is just a placeholder for the navbar I will do once the other formatting is fixed.) I'm sure this must be an easy fix and something I've overlooked, but I have been at this for hours and can't seem to figure out how to make this work. Suggestions? Thanks! url: http://www.bonvoyageimagery.com Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
body {
border: 0 0 0 0;
margin: 0 0 0 0;
background: #000;
color: #FFF;
}
#header {
background: url(images/LogoBackgroundGradient.jpg) repeat-x;
text-align: center;
margin: 10px 0 0 0;
padding: 0 0 0 0;
}
.imgBorderHeader {
border: 2px solid #888;
}
#menuBar {
clear: both;
border: 0 0 0 0;
padding: 0 0 0 0;
margin: -4px 0 0 0;
background: yellow;
}
.filmstripTop {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripTop-8x12.jpg) repeat-x;
}
.filmstripBottom {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripBottom-8x12.jpg) repeat-x;
}
#menuChoices {
width: 100%;
clear: both;
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background: #362217;
color: white;
}
#menuChoices p {
font-size: .75em;
font-family: Arial;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="header">
<img border="0" src="images/Logo2.jpg" style="padding-right: 70px;" width="280" height="125">
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035223&Size=Th" width="100" height="100" hspace="10" align="top" style="margin-top: 10px; margin-bottom: 10px" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035171&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035174&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=2645154&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
</div>
<div id="menuBar">
<div class="filmstripTop"></div>
<div id="menuChoices">
<p>Home Destinations Themes Specialty Calendars Browsing and Ordering Customer Care</p>
</div>
<div class="filmstripBottom"></div>
</div>
</body>
</html>
Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class. I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body
{
margin: 0;
padding: 0;
background: yellow;
overflow: hidden;
}
div
{
margin: 0;
padding: 0;
}
.pageContainer
{
width: 100%;
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.header
{
height: 100px;
background: orange;
}
.docBody
{
height: 100%;
width: 100%;
overflow: auto;
background: black;
}
.docBodyColumns
{
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.col1
{
width: 33%;
background: green;
padding: 10px;
}
.col2
{
width: 34%;
background: red;
padding: 10px;
}
.col3
{
width: 33%;
background: blue;
padding: 10px;
}
.footer
{
height: 60px;
background: aqua;
}
</style>
</HEAD>
<BODY>
<table class='pageContainer'>
<tr>
<td class='header' valign='top'>Header</td>
</tr>
<tr>
<td>
<div class='docBody'>
<table class='docBodyColumns'>
<tr>
<td class='col1' valign='top'>
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1
</td>
<td class='col2' valign='top'>
Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2
</td>
<td class='col3' valign='top'>
Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class='footer' valign='top'>Footer</td>
</tr>
</table>
</BODY>
</HTML>
Hi- 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 |
|||||||