I'm facing a problem in IE6 :
My website contains a drop-down menu and some pages contains comboboxes.
When I roll-out a menu and it's covering a combobox, the combobox always appears over the menu !
My website is to be used exclusively on IE6, so I want to solve this problem on IE6 and make the drop-down menu apprear OVER the combobox in such situations.
Here is a code snippet that illustrates the problem :
<html>
<body>
<!-- Menu -->
<table width="20%" border="0" style="position:relative; z-index:100;">
<tr>
<td colspan="0">
<table style="background-color: #40668C; color: white; z-index:100;" width="100%">
<tr>
<td>Agenda</td>
</tr>
<tr>
<td>
<table
align="right"
valign="top"
width="100%"
height="100%"
style=" visibility: visible;
position: absolute;
background-color: #40668C;
color: white;
top: 21px;
z-index:100;">
<tr><td>Personnal</td></tr>
<tr><td>Group</td></tr>
<tr><td>Day</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Combobox -->
<form style="z-index: 0;">
<TABLE style="z-index: 0;">
<TR style="z-index: 0;">
<TD style="z-index: 0;">
<TABLE style="z-index: 0;">
<TR style="z-index: 0;">
<TD>Combobox :</TD>
<TD style="z-index: 0;">
<SELECT style="z-index: 0;">
<OPTION></option>
<OPTION>Element 1</option>
<OPTION>Element 2</option>
</select>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
</body>
</html>
I know this problem has already been reported and it's because of IE6 but unfortunately, I tried different solutions so far without any success.
Thanks in advance !
This is the result of a z-index bug in IE6. Select elements are given a high z-index, so they always appear in front of other elements.
A quick way to fix this is to hide the select when your menu is open. You can call a function like this when you open the menu:
function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}
Reference: http://www.tinyqueen.com/web-site-design/ie6-select-z-index-bug-a-workaround
It's an IE6 bug.
There is no way around it other than setting the combo-box's CSS attribute display: none; while hovering on the dropdown, and setting it visible again otherwise.
Related
Is there a simple way to remove or make invisible two characters from the beginning of a string using just html and css? You can keep for yourself the downvotes to the questions... I know it's a hack.
I'm using mailchimp to send abandoned cart reminder mails. The price of a product is displayed as
zl123
but I need to display it as
123 zl
I tried to change the settings of the money format, but I haven't found a solution, so I'll try to hack it in some other way. Mailchimp replaces automatically a placeholder so I have to process what they put instead of the price placeholder, I have no control on that.
I have an html mail template and I can use css with it but no javascript. If you know how to solve the format problem in the mailchimp settings directly it will also work of course. Any help is very appreciated.
This is the product list code and the tag is *|PRODUCT:PRICE|*:
*|ABANDONED_CART:[$total=3]|*
<table>
<tbody>
<tr>
<td rowspan="3" style="vertical-align:top" valign="top" width="80"><img src="*|PRODUCT:IMAGE_URL|*" /> </td>
<td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
</tr>
<tr>
<td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
</tr>
<tr>
<td style="padding: 10px 30px">
<table cellpadding="0" cellspacing="0" style="background:#bed22c;">
<tbody>
<tr>
<td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
<td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
*|END:ABANDONED_CART|*
A hacky way will be fixing and repeating the word twice!
p {
font-size: 20px;
}
.hide-first-two {
text-indent: -0.75em;
overflow: hidden;
display: inline-block;
}
.show-first-two {
width: 0.75em;
overflow: hidden;
display: inline-block;
}
<p>
<span class="hide-first-two">zl123</span>
<span class="show-first-two">zl123</span>
</p>
Or using inline style:
<p style="font-size: 20px;">
<span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
<span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>
Considering your text lz123 comming form server and appened in
<p>lz123</p>
You can add text in this <p> by using ::after and ::before css selectors
But if is not possible to remove or manipulate that text in <p> using css
For string manipulation i suggest to use Javascript or Jquery
I have a page with two large tables, one positioned above the other:
http://files.sportsmogul.com/Encyclopedia/1907/BOS/index.html
In my editor (Dreamweaver CC 2015), there is no space between the tables.
But in Chrome, there is a unwanted gap of about 10 pixels (the blue space where the background shows through, between the top "navbar" and the rest of the page).
When you open 'Developer Tools' in Chrome, you see that Chrome has INSERTED a 'br' tag on-the-fly. (You can see the tag in the Developer Tools, but Chrome doesn't make any changes to my HTML file).
The first table closes on line 69.
The second table opens on line 71.
There is no code between these two tables (much less a 'BR').
However, Chrome inserts a 'BR' tag when displaying the file.
Why is Chrome doing this and how can I stop it?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>
1907 Boston Americans
</title>
<link href="../../styles.css" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">body {background-color: #606080; background-image: url(../../wallpaper.jpg)}</style>
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore)
{
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<a name="top"></a>
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellpadding="0" cellspacing="0" background="../../navbar0.jpg" bgcolor="#ffffff">
<tr><td width="70" valign="top" style="PADDING-LEFT: 10px; PADDING-TOP: 10px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="bottom"><b class="title">Year: </b></td></tr>
<tr><td height="27" valign="bottom"><b class="title">Team: </b></td></tr>
</table></td>
<td style="PADDING-TOP: 7px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="top">
<form name="form1" id="form1">
<select name="menu1" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1901/BOS/index.html">1901</option>
<option value="../../1902/BOS/index.html">1902</option>
<option value="../../1903/BOS/index.html">1903</option>
<option value="../../1904/BOS/index.html">1904</option>
<option value="../../1905/BOS/index.html">1905</option>
<option value="../../1906/BOS/index.html">1906</option>
<option value="../../1907/BOS/index.html" selected>1907</option>
<option value="../../1908/BOS/index.html">1908</option>
<option value="../../BOS/index.html">All Years</option>
</select>
1906 | 1908
</form></td>
<td><span title="Show All Years"><img src="../../history.jpg" alt="All Years" width="28" height="22" border="0"></span></td>
</tr>
<tr><td height=27 valign="top">
<form name="form2" id="form2">
<select name="menu2" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1907/BOS/index.html" selected>Boston Americans</option>
<option value="../../1907/BSN/index.html">Boston Doves</option>
<option value="../../1907/BRO/index.html">Brooklyn Superbas</option>
<option value="../../1907/CHC/index.html">Chicago Cubs</option>
<option value="../../1907/CHW/index.html">Chicago White Sox</option>
<option value="../../1907/CIN/index.html">Cincinnati Reds</option>
<option value="../../1907/CLE/index.html">Cleveland Naps</option>
<option value="../../1907/DET/index.html">Detroit Tigers</option>
<option value="../../1907/NYG/index.html">New York Giants</option>
<option value="../../1907/NYY/index.html">New York Highlanders</option>
<option value="../../1907/PHA/index.html">Philadelphia Athletics</option>
<option value="../../1907/PHI/index.html">Philadelphia Phillies</option>
<option value="../../1907/PIT/index.html">Pittsburgh Pirates</option>
<option value="../../1907/SLB/index.html">St. Louis Browns</option>
<option value="../../1907/STL/index.html">St. Louis Cardinals</option>
<option value="../../1907/WSH/index.html">Washington Senators</option>
<option value="../../1907/index.html">All Teams</option>
</select></form></td>
<td><span title="Show All Teams"><img src="../../earth.jpg" alt="All Teams" width="28" height="22" border="0"></span></td>
</tr>
</table></td>
<td width="200"><img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76"></td>
<td width="198"><img src="../../navbar2g.jpg" border="0" alt="Leaders" width="198" height="76"></td>
<td width="198"><img src="../../navbar3.jpg" border="0" alt="Baseball Mogul" width="198" height="76"></td>
</tr>
</table>
<!-- Chrome inserts a BREAK (BR) here. -->
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px" align=center valign=top><BR>
<table class=table1 cellSpacing=0 cellPadding=0 width=310>
<tr class=tabletitle><td colspan="3">
<div align="center"><strong>1907 American League</strong></div></td></tr>
<tr class=header0>
<td width=195 class=ltl>Team</td>
<td width=60 class=ltc>Record</td>
<td width=55 class=ltc>GB</td></tr>
<tr><td class=lml>Detroit Tigers</td>
<td class=lmc>92 - 58</td>
<td class=lmc>—</td>
</tr>
<tr><td class=lml>Philadelphia Athletics</td>
<td class=lmc>88 - 57</td>
<td class=lmc>1.5</td>
</tr>
<tr><td class=lml>Chicago White Sox</td>
<td class=lmc>87 - 64</td>
<td class=lmc>5.5</td>
</tr>
<tr><td class=lml>Cleveland Naps</td>
<td class=lmc>85 - 67</td>
<td class=lmc>8.0</td>
</tr>
<tr><td class=lml>New York Highlanders</td>
<td class=lmc>70 - 78</td>
<td class=lmc>21.0</td>
</tr>
<tr><td class=lml>St. Louis Browns</td>
<td class=lmc>69 - 83</td>
<td class=lmc>24.0</td>
</tr>
<tr class=highlight2><td class=lml><B>Boston Americans</B></td>
<td class=lmc><B>59 - 90</B></td>
<td class=lmc>32.5</td>
</tr>
<tr><td class=lml>Washington Senators</td>
<td class=lmc>49 - 102</td>
<td class=lmc>43.5</td>
</tr>
</table></td>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 5px" align=center valign=top><br>
<table class="table1" cellSpacing=0 cellPadding=0 width=310>
<tr class="tabletitle"><td>
<div align="center"><strong>7th (AL)</strong></div>
</td></tr>
<tr class=header><td></td></tr>
<tr><td class=lml>Runs Scored: 464</td></tr>
<tr class="highlight"><td class="lml">Runs Allowed: 558</td></tr>
<tr><td class="lml">Attendance: 436,777</td></tr>
</table></td>
</tr>
First of all there is a <br> immediately after the navbar table: http://i.imgur.com/qLGU3Du.png
Remove that and most of the space will go away. The leftover space is caused by the 'Home', 'Leaders', and 'created by' images in the navbar. The default alignment for inline elements such as those reserves some space underneath for letter descenders. You need to add a vertical-align: top style to each of those 3 images to remove the space. For example, the first image would look like:
<img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76" style="vertical-align: top">
So after removing that <br> and adding those styles to the three navbar images, it should look like this: http://i.imgur.com/XdgcTjj.png which I believe is the effect you were going for.
Also, just as a side note, Dreamweaver makes your code look absolutely atrocious and almost impossible to read. It makes finding these problems very difficult, which may be why nobody has really been able to help.
There is in fact a <br> between your tables. Giving a line might not help because it could be different in dream weaver.
What I would suggest is, open this document and then once open, press the following at the same time. CTR + F (or CMD + F on a mac) A search box will pop up, then type <br> If you do this while at the top of the document it will bring you to the first break, otherwise go to the one nearest the top. That is the one causing issues. just delete it and problem solved!
Inside of every
<td colspan="3" style="PADDING-LEFT: 10px; PADDING-RIGHT: 10px">
are "br" tags. Search for this line and you will find them all, or look at what the poster suggesting using a search function has said, it is also sufficient.
My wife discovered at least a partial answer:
Phantom <br> tag rendered by browsers prior to <table> tag
Unfortunately, the solution to that question doesn't appear to solve my problem. I validated the code using the feature in Dreamweaver 2015 that submits it W3C service and it comes back with "No warnings or errors found".
I am trying to keep a line of text in a cell from moving down to the next line, but when using white-space: nowrap; the image background that previously covered 100% of the screen is cutoff, as seen in this screenshot:
before and after:
This is the code for the background:
div.transbox {
margin: 0px;
width: 100%;
height: 100px;
background-image: url('http://almosthome2016.org/images/header_trans_bg.png');
}
and the html for the table:
<div class="transbox"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="3%" align="left" valign="bottom"></td>
<td align="left" valign="bottom" class="style74"><span class="style8">ALMOST HOME</span> <span class="style75">THE CAMPAIGN FOR THE NEW IRISH ARTS CENTER</span></td>
<td align="left" valign="bottom" class="style75"> </td>
</tr>
</table>
</div>
This was my way of getting the opaque background as the back of the table. I'm open to other suggestions if that is what is causing the issue with the nowrap.
Thank you!
Try adding:
background-size:cover;
To your CSS for div.transbox
I'm playing with a new layout of the site and I am getting quite hopeless in chrome and opera everything renders the way it should be but in Mozilla I get unformated output from PHP that is causing this and how to fix this.
I have put everything in a fixed cell but it is somehow ignored:
<td width="900px"> <div id="dynamiclist_index"><?php echo $dynamic_list;?></div></td>
The site is: http://musetemplatespro.com/.
but would not recommend putting styles in div's or td best to create separate stylesheet
<td style="width:900px;">
<td style="width:900px; margin: 0px auto;">
style sheet:
.container {width: 900px margin: 0px auto;}
best to have a container example
<div class="container">
<div id="dynamiclist_index">
<td><?php echo $dynamic_list;?></td>
</div>
</div>
it may work or not
There is no need to create a single table for each output.
It is better if you use it like this:
<table width="900" align="left" border="0" cellspacing="10" cellpadding="0">
<tbody>
<?php foreach($your_values as $value){ ?>
<tr style="width:300; float:left;">
<td>
<ul>
<li><img style="border:#666 1px solid;" src="images/theme_pic/3/3.jpg" alt="3" width="300" height="400" border="1"></li>
<li><a style="font-family: Helvetica, Arial, sans-serif; font-weight: lighter; ">1</a></li>
<li><hr></li>
</ul>
</td>
</tr>
<?php } ?>
</tbody>
</table>
There will be need of more styling but this is safer for cross-browser compatibility
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).