I am currently trying to add some Design to an selfprogrammed board. Somehow I am experiencing odd buggs with the CSS rendering:
Every Row of that board is a .BoardRow Class to be formated in CSS. So, I am using:
.BoardRow td {
border: 2px dotted #4E6011;
background-image:-webkit-linear-gradient(bottom, #FFFFFF 33%, #EFEFEF 90%); /* Chrome, Safari */
}
this to add some nice looking borders around each row. Somehow always the top row is failing to work as intended. When zooming in with CTRL + Mouse in Google Chrome the top border always changes as shown in the picture. What can i do about this?
EDIT: Here is the full generated HTML Code:
<div id="Top">
<div id="Navi"> <a class="Link" href="index.php?s=home">Startseite</a> <a class="Link" href="index.php?s=physicians">Ärzteliste</a> <a class="Link" href="index.php?s=pmr">Polymyalgia Rheumatica</a> <a class="Link" href="index.php?s=logout">Abmelden</a> <a class="Link" href="index.php?s=course">Krankheitsverlauf</a> <a class="Link" href="index.php?s=board">Forum</a> </div>
</div>
<div id="Main">
<table id="Board">
Seite (1 von 1)
<tr>
<td class="BoardHeadline">Thema</td>
<td class="BoardHeadline">Beiträge</td>
<td class="BoardHeadline">Angesehen</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">asdfasdfas von (Unbekannter Benutzer)<br />
geschrieben am 25:03:2013 um 15:43 </td>
<td class="BoardCounter">3</td>
<td class="BoardCounter">20</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">Titelasdgkljahskjdghkjasg von (Unbekannter Benutzer)<br />
geschrieben am 25:03:2013 um 16:14 </td>
<td class="BoardCounter">1</td>
<td class="BoardCounter">4</td>
</tr>
<tr class="BoardRow">
<td class="BoardName">asdjglkajsljkdg von (Unbekannter Benutzer)<br />
geschrieben heute um 12:58 </td>
<td class="BoardCounter">3</td>
<td class="BoardCounter">12</td>
</tr>
</table>
<br />
Neues Thema eröffnen </div>
<div id="UserPanel"> Benutzerprofil </div>
and here is the CSS:
CSS
Please note that i am not an HTML or CSS expert. ;)
I am using Google Chrome 19 (old portable version on my usb stick) but this is also occuring on the local installed IE 8.
the problem is, the two dotted border are conflicting, try to use a border : colapse
Related
I'm trying to get the social media sprites in this HTML table at https://www.alexcurriemedia.com/video/ to press up flush with the image above it. Cannot figure out a way to do this.
Can't add another table above it because the upper image is a wordpress shortcode that doesn't seem to work within the table.
Here is the code:
<table><center>[wds id="3"]
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>
Thanks so much!!
The stray <p> tags that you see are likely a result of Wordpress automatically inserting them through the text editor. You should not place a <div> inside of an <a> tag if at all possible. While technically valid, I've seen it cause problems with things such as Wordpress's text editor. If you look at the source code in your browser, you will notice that the link is actually being rendered twice, like so:
<td nowrap="">
<a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p>
<div class="sprite Twitter1"></div>
</a>
<p>
</p>
</td>
The following code should work better:
<table>
<tbody><tr>
<td nowrap>
</td>
<td nowrap>
<a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a>
</td>
<td nowrap>
<a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a>
</td>
</tr>
</tbody>
</table>
Once you change that, simply add the following to your CSS:
.sprite {
display: block;
}
This will cause the content in each <td> to align at the top, rather than in the center as they are doing currently.
If you still have trouble with the <p> tags being automatically inserted, you may look into this function.
End result:
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.
I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it.
On the pic you can see what I'm trying to do and I put the html into jsfiddle.
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td colspan="2">
<img src="head.jpg" width="700" border="0">
</td>
<tr>
<td colspan="2">
<p style="color:#00668a;text-align:left;font-size:18px;">
Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote:
</p></td>
</tr>
<tr style="background-color:#deeef4;">
<td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank">
<img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a>
<td width="200" height="163"><p>"Sund and Fun Wochen"</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
</ul><img src="button.png" width="345" height="35" border="0"></td></td>
</tr>
</table>
jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it:
<tr>
<td colspan="2">
<div style="border-top: solid 1px #00668a;height:1px;">
Here is a jFiddle:
http://jsfiddle.net/qXxPb/2/
Try:
<td width="600" cellpadding="0" >
For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/
Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells.
Should work now, next time validate your code first please.
<td colspan="2">...</td>
was the important line.
We have a custom implementation of CellTable in which there is a custom column to render label and image. As part of hovering on a table row, we call table.redrawRow(rowNum) to render some context menu.
However, doing that, cause the text and image column to re-render the image (make a server call to fetch the image). This causes a flickering effect. This only happens in Chrome (version I am using - Chrome27)
The table row looks like this:
<tr __gwt_row="0" __gwt_subrow="0" class="GAH0TQLMKD">
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLOKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-65" tabindex="0">
<div style="border-collapse: separate; border-spacing:0">
<div style="display:table-cell;vertical-align:middle">
<img src="icon.png" alt="" style="vertical-align:middle; border: 0;width:16px;height:16px; ">
</div>
<div class="GAH0TQLMJD" style="display:table-cell"><b>Contiki</b></div>
</div>
</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-66">Travels</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-67">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-68">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-69">2013-07-10</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-70">5</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-71">07/10/2013 01:53 AM</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLILD GAH0TQLDAD" align="right">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-72">
<div class="GAH0TQLFAD">
<div style="width:64px; height:17px"></div>
</div>
</div>
</td>
</tr>
I don't see flickering on Firefox or IE9.
Note: My Cache-Control headers are set to no-cache.
Any thoughts? Ideas?
If you ask the browser not to cache the image, and you ask it to draw the image, it'll re-download it.
So either change your caching strategy for the image, and/or your strategy for updating the table (using a redrawRow during a hover to display something new seems suboptimal; the cells should rather listen to the mouse events and update their DOM dynamically)
I have a table of records which is displayed nicely in a HTML Table.
The last column of this table displays a icon when hovering the row. When the user hovers the icon a drop down menu appears for all actions related to that row.
Currently I have the td that Icon is in set to Position:absolute and the div of the drop down menu is also set to Position Absolute.
This means I can align the Dropdown Menu Div to align nicely against the row it relates.
Firstly im not totally sure why this is the case. I would have thought I would need the TD as Absolute and the Menu Div as Relative but this just isnt the case.
The actual issue I am currently having (as the way I have it works across all browser) is that when the row is expanded to be double the height from text in other columns. The TD with absolute positioning applied does not expand to be 100% height of the TR. Which causes issues when trying to hover the tr and you move over where the last TD which should have expanded to the row height and it registers it as a hover out on the TR.
Any ideas to get around this?
The problem with putting the icon in a div which is relative is that I need the div to be 100% height/width of the td to be able to align the menu correct to the row!
EDIT:
As requested Some Html... This is a mustache template. Shouldn't be to hard to follow even if you have never used it
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
I would get rid of the table all together. I would then use divs with table behavior. This will give you much more control over how each element works, each row, and each column.
This link explains the concept quite well: http://snook.ca/archives/html_and_css/getting_your_di
You might try this::
<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
Tutorials<br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu">HTML</td></tr>
<tr><td class="menu">CSS</td></tr>
<tr><td class="menu">XML</td></tr>
<tr><td class="menu">XSL</td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
Scripting<br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu">JavaScript</td></tr>
<tr><td class="menu">VBScript</td></tr>
<tr><td class="menu">DHTML</td></tr>
<tr><td class="menu">ASP</td></tr>
<tr><td class="menu">ADO</td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
Validation<br>
<table class="menu" id="validation" width="120">
<tr><td class="menu">Validate HTML</td></tr>
<tr><td class="menu">Validate XHTML</td></tr>
<tr><td class="menu">Validate CSS</td></tr>
<tr><td class="menu">Validate XML</td></tr>
<tr><td class="menu">Validate WML</td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>