|
CSS - Centering Divs, Cross-browser Compatibility
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. Similar TutorialsHi, 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 Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div. Take a look at the template he http://www.ipfwcommunicator.org/devindex.php At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser. I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side. Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case: {margin-left: 15px;} Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px. Compare here between Firefox and IE6 and you'll see it. And CSS is here So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted Thanks in advance, Aiden Ok, so I've having some problems getting a webpage I'm designing looking good (I'm better at the "behind the scenes" coding, not so much the visual part). Anyway, I'm having some problems in Firefox and even more in IE, so here goes. In Firefox I want it to extend all the way to the bottom of the page, I tried adding "min-height:100%" to the container's styles, but that doesn't work. Can I not use a percent for the min-height? If I directly declare the height to be 100%, then the body can expand outside of the container rather than the container expanding with it. I also want to make sure that the body is always completely filling the container. The page in question is he http://www.magicsoftinc.com/michigans_edition/ My styles are below and you can view the page source or use Firebug to see the elements I'm talking about Code: a:link {
color:black;
text-decoration:underline;
}
a:active {
color:black;
text-decoration:none;
}
a:hover {
color:black;
text-decoration:none;
}
a:visited {
color:black;
text-decoration:underline;
}
body {
background-color:#BBCCFF;
font-family:Calibri, Arial, Helvetica, sans-serif;
margin-bottom:0;
margin-top:0;
}
div {
border:0px solid #FF0000;
border-top-width:0;
}
img {
border-width:0;
}
.even{
background-color:#FFCCBB;
}
.odd {
background-color:#BBCCFF;
}
.preload{
display:none;
left:-9001px;
position:absolute;
top:-9001px;
}
#background {
height:100%;
left:0;
margin:0;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:-9001;
}
#backgroundLeft{
position:fixed;
top:0;
left:0;
height:100%;
}
#backgroundRight{
position:fixed;
top:0;
right:0;
height:100%;
}
#body {
background-color:#FFFFFF;
color:#000000;
min-height:250px;
}
#container {
border:1px solid black;
border-bottom-width:0;
border-top-width:0;
height:100%;
margin:0 auto 0 auto;
min-height:100%;
min-width:760px;
width:95%;
}
#diggThis {
background-color:transparent;
margin-left:-27px;
z-index:-9001;
}
#footer {
background-color:#FFFFFF;
text-align:center;
font-size:small;
}
#header {
background-color:#000000;
height:271px;
}
#leftMenu {
background-color:#BBCCFF;
float:left;
margin-right:4px;
padding:4px;
width:260px;
}
#main {
min-width:500px;
padding:4px;
}
#main .title {
font-size:xx-large;
font-weight:bold;
}
#menu {
background-image:url("images/menuGradient.png");
background-repeat:repeat-x;
border-top:1px solid #7E7E7E;
border-bottom:1px solid #4E4E4E;
color:#FFFFFF;
font-weight:900;
height:35px;
position:relative;
top:-35px;
}
#menu a:link {
color:white;
text-decoration:underline;
}
#menu a:active {
color:white;
text-decoration:none;
}
#menu a:hover {
color:white;
text-decoration:none;
}
#menu a:visited {
color:white;
text-decoration:underline;
}
#menu .button {
background-image:url("images/menuButtonUp_blue.png");
background-position:center;
background-repeat:no-repeat;
color:#FFFFFF;
font-weight:600;
height:35px;
overflow:hidden;
padding:0;
text-align:center;
width:106px;
}
#menu table {
padding:0;
text-align:center;
width:100%;
}
#menu tr {
padding:0;
}
#userPanel {
position:absolute;
right:3%;
top:136px;
width:200px;
height:100px;
background-color:#BBCCFF;
}
With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
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. 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 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>
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! 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 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 don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now). To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc. ** I know about ie7-js from Dean Edwards, but I don't know how well that works. ** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues. ** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect. So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier. Thanks I am having problem making this cross browser friendly Code:
/* Div Structure */
#heading {
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}
#search {
float: left;
}
#img {
float:left;
}
#text {
float:right;
}
#phone {
position: relative ;
float: right ;
top: 15px ;
right: 10px
}
#head {
margin: 5px ;
padding: 0;
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
}
#headnav {
float: right ;
margin: 100px 17px 5px 10px;
padding: 0;
}
#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ;
}
#mainpage {
float: right;
position:relative;
width: 730px ;
right: -5px;
left: -5px;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
margin-top: 5px;
}
/* Side Bar */
#sidebar h3 {
color:black;
font-size: 11px;
font-weight: normal;
letter-spacing: 0.2em;
margin: 5px;
padding: 0px;
text-transform: uppercase;
border-bottom:dashed;
border-bottom-color:black;
border-width: 1px;
}
#sidebar ul, #sidebar ol {
list-style: none;
margin: 0;
padding: 0;
}
#sidebar li {
margin: 0;
list-style:none;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#sidebar a {
color: #9999FF;
text-decoration:none;
}
#sidebar a:hover {
color: black;
text-decoration:underline;
}
#sidebar div {
margin: 20px 0;
padding: 0;
}
/* Header Style */
#head h1 {
font-family:Verdana, Arial, Helvetica, sans-serif ;
letter-spacing: 0.5em;
font-size: 2em;
color: black;
}
#head a {
color: black;
text-decoration: none;
}
/* Head Nav */
#headnav a {
color: black;
text-decoration:none;
}
#headnav a:hover {
text-decoration:underline;
}
#headnav p {
color:black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.1em;
}
/* Main Page */
#mainpage img {
padding: 10px;
}
#mainpage h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:black;
letter-spacing: 0.5em;
font-style: bold ;
border-bottom: solid;
border-bottom-color:#0066CC;
border-bottom-width: 2px;
}
#mainpage p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage li {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
border-bottom: dotted;
border-bottom-color: black;
border-bottom-width: 1px ;
latter-spacing: 0.2 em;
font-size:18px;
}
#mainpage a {
color: #910B2D;
text-decoration:none;
}
#mainpage a:hover {
color:silver;
text-decoration:underline;
}
/* Phone */
#phone p {
color: black ;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px ;
}
/* Heading's */
#heading h2 {
color: white;
}
i have a web site that i am redesigning and the redesign is @ http://cometosandiego.com/weekendvisit/index.php it shows up GREAT in firefox screwed in opera and COMPLETLY out of wack in IE 6 and 7 what to do???? thanks Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites. Also, anyone know any good links for getting better at coding for cross browser CSS? Thanks! 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 designing a site with a combination of css and tables and I've run into some issues w/IE. I've got some content in a nested table <table id="content"> <tr> <td> Content... </> </> </table> and in my style sheet i have #content{ padding-left:20px; ... } Firefox recognizes this property just fine and displays the table slightly indented, but IE seems to completely miss it. I have figured out a few workarounds, but they end up causing more problems and there are also other thigns that IE has been missing.. Does anyone know what might be causing this? ALSO i have a <div id=divider> inside a td w/css props as width:1px and height:100% and background-color:#000000. again, firefox recognizes this and displays a black line that is the height of the td and 1 px wide, but IE displays a little midget line thats like 10px tall instead of the entire height of the cell. wtf? |
|||||||