Just upgraded my IE to version 10 on Windows 7 yesterday, and am having problems with hover menus.
Seems to work fine on other browsers I've tried(including previous versions of IE) but on IE10 the popup table menu loses background and border. At first on page load it is ok but on moving across items loses the table background color and border(appears table becomes 0 width for some reason).
Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<title>IE 10 Menu Test Page</title>
</head>
<style>
li {
background-color: #cccccc;
list-style: none;
position: relative;
width: 80px;
}
li table {
background-color: #cccccc;
border: 1px solid #999999;
display: none;
left: 75px;
position: absolute;
top: 0;
z-index: 1000;
}
li:hover table {
display: block;
}
</style>
<body>
<ul>
<li>Fish
<table>
<tbody>
<tr><td>Cod</td></tr>
<tr><td>Salmon</td></tr>
</tbody>
</table>
</li>
<li>Fruits
<table>
<tbody>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
</tbody>
</table>
</li>
<li>Grains
<table>
<tbody>
<tr><td>Rice</td></tr>
<tr><td>Wheat</td></tr>
</tbody>
</table>
</li>
<li>Meat
<table>
<tbody>
<tr><td>Beef</td></tr>
<tr><td>Chicken</td></tr>
</tbody>
</table>
</li>
<li>Vegetables
<table>
<tbody>
<tr><td>Carrot</td></tr>
<tr><td>Tomato</td></tr>
</tbody>
</table>
</li>
</ul>
</body>
</html>
IE Version: 10.0.9200.16521
Thanks for any help!
Edit: have added jsfiddle of example above here for people to try out: http://jsfiddle.net/3Babs/
*Edit 2: Added screenshot images from different browsers to compare:
Chrome (25.0.1364.172)
Firefox (19.0.2)
IE10 (10.0.9200.16521)
Opera (11.64)
This should work as expected: http://jsfiddle.net/ESd8y/1/
Remove the background colour from the table and add it to the tr instead. You will see gaps due to borders not collapsing in tables, so you need to collapse them:
li table {
border-collapse: collapse;
/* other styles here, except background-color */
}
li table tr {
background-color: #cccccc;
}
Once you make these changes it should work as expected.
Related
I need your help,
I can't seem to figure out as to why the div (bottom border) breaks onto the next page when a print preview is done in internet explorer 11:
Either way, if it can done properly, or via another method, id ideally like to get a 1px border around the page (letter-sized, 8.5inches x 11.0inches) with some margins.
Here is the HTML and CSS markup in question:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
margin: 0.25in;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.table td {
padding: 0;
}
</style>
</head>
<body>
<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<td>File Number:</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
The problem has to do with the CSS box model. By default, borders are added to the outside of the width/height, so you need to change the box-sizing to border box, which puts the borders on the inside of the width/height:
<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...
If you don't change it to border-box, the div will have a height of 100% + 2px (1px for top border, 1px for bottom border) which causes the overflow to a second page.
I can't seem to get my margin-top:0; property to work in my style sheet. I'm not sure why, but when I clear my browser's cache, the property will work temporarily, and then go right back to leaving a space at the top of my page (take a look: www.sunporchhomes.com). I'm using Wordpress to build. Here's the top half of my code, any help would be greatly appreciated.
CSS
body
{
margin:0;
padding:0;
background-image:url("http://www.sunporchhomes.com/sphbg5.png");
}
a:link {color:#ffffff;} /* unvisited link */
a:visited {color:#ffffff;} /* visited link */
a:hover {color:#808080;} /* mouse over link */
a:active {color:#ffffff;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
#logo {
margin: 0;
width: 1000px;
z-index: 26;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#header {
width: 1000px;
height: 175;
position: absolute;
top: 0;
left: 0;
padding-left:70px;
}
#banner {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 419px;
z-index: -1;
}
#navigationtable {
position:absolute;
padding-left:730px;
z-index: 10;
padding-top:20px;
}
HTML
<body>
<div id="wrapper" class="hfeed">
<img id="banner" src="http://sunporchhomes.com/spmain1.png" alt="Banner Image"/>
<div id="navigationtable">
<table class="tg" width="400">
<tr>
<th class="tg-lhfu">HOME</th>
<th class="tg-031e"></th>
<th class="tg-031e">WARRANTY</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu">FEATURES</th>
<th class="tg-031e"></th>
<th class="tg-031e">ROWHOME FAQ</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu"><a href="http://sunporchhomes.com/floor-plan-2.html">FLOORPLAN</th>
<th class="tg-031e"></th>
<th class="tg-031e">ABOUT US</th>
<th class="tg-031e"></th>
</tr>
<tr>
<th class="tg-lhfu">NEIGHBOURHOOD</th>
<th class="tg-031e"></th>
<th class="tg-031e">CONTACT</th>
<th class="tg-031e"></th>
</tr>
</table>
</div>
<div id="boxplus">
<img src="http://sunporchhomes.com/boxplus.png" />
</div>
<div id="logo">
<img src="http://sunporchhomes.com/splogo13.png" />
</div>
</div>
The issue you are experiencing is not your css, but rather is your WordPress admin bar.
When you are logged into WordPress, it attempts to "forcefully" draw an admin bar across the top 32 pixels of your browser window.
When your css conflicts with how WP tries to do this (which your css I believe does, due to your heavy use of position: absolute), you can be left with a blank space at the top rather than the admin bar.
You can disable the admin bar by editing your user profile, and unchecking "Show Toolbar when viewing site"
I've tested in Firefox, Chrome, and Internet Explorer - they all render your site properly, without the space you described.
I have some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">
When I place an image followed by text in a table cell, the vertical alignment of the text shifts down compared to text in adjacent cells. I tried using a line-height CSS property, but it didn't seem to have an affect.
In the following example, I need "123 Description" to be flush with "cell one." Also, there is a space between the image and "123" by default. How can I adjust that - negative margins perhaps?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
/* .adjust-text { line-height: 1.3em; } */
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span class="adjust-text">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
By default, the image is aligned with the baseline of the text, which is in effect pushing the text in that cell down. To address this, specify:
td img { vertical-align: top; }
There's a good summary of CSS vertical-align here.
To remove the space... remove the space:
<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>
http://jsfiddle.net/s38Uv/
To align your image with the cell, try putting the image in a css rule as a background image. Then adjust the y position of the background using background-position. Add a padding to the left of the element to display the text to the right of the image.
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
.image {
background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
background-position: 0 -2px;
padding-left:20px;
}
<span class="image">123 Description</span>
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
td { vertical-align: baseline;}
td img { vertical-align: middle;}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span style="margin: 0 0 0 -5;">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have you tried a classic vertical-align:middle? Else put the image in it's own cell or leave the alignment at default and change the padding-bottom of all your cells will also give you the same thing.
This question has been asked (and answered) previously at: CSS: Make a block element fill the entire space of a parent element?
However, the accepted solution does not work in CHROME (as noted in the comments by mercator). The fix suggesting to add a height:100 to the <tr> element doesn't work either. Does anyone know how to achieve this effect with webkit-based browsers? The link http://dl.getdropbox.com/u/26620/stackoverflow1.html (provided by the original poster) shows this issue. It works in FF/IE but not chrome.
Thanks.
I tried this in Chrome and it seems to work great: http://apptools.com/examples/tdcolor.php
Here's the css (call it test.css):
table.navbar {
border-collapse: collapse;
}
table.navbar td {
border: 1px solid #ccc;
}
table.navbar td a{
display: block;
width: 9em;
padding: 3px;
text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
color: #000;
background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
color: #fff;
background-color: #666;
}
And a sample html file (remember to change the path to the test.css file):
<html>
<head>
<link rel='stylesheet' href='CHANGE PATH TO YOUR test.css' type='text/css' media='all' />
</head>
<body>
<p><strong>Example:</strong></p>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><table border=0 cellspacing=0 cellpadding=0 class=navbar>
<tr>
<td class=navbar><a href="javascript:void(0);">First that is very, very, long to make sure that everything is working correctly <b
style="color:black;background-color:#a0ffff">Link</b></a></td>
</tr>
<tr>
<td class=navbar>Another <b style="color:black;background-color:#a0ffff">Link</b> </td>
</tr>
<tr>
<td class=navbar>A Third <b style="color:black;background-color:#a0ffff">Link</b> </td>
</tr>
</table></td>
<td valign=top class=othercontent><p>Other content goes here.</p></td>
</tr>
</table>
</body>
</html>
Does that work for you?