UL element margins same but Firefox and IE showing different.
FULL CODE:
<html>
<head>
<style>
body
{
background-color: Red;
}
ul
{
font-family: Verdana;
font-size: 8pt;
}
ul a
{
text-decoration: none;
color: Black;
}
ul a:hover
{
text-decoration: underline;
}
table
{
background-color: Transparent;
border-collapse: collapse;
}
table tr td
{
vertical-align: top;
text-align: left;
font: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#tblYayinAkisi
{
border: 1px white solid;
background-color: #222222;
font-family: Verdana;
color: #ffffff;
vertical-align: middle;
font-size: 10pt;
width: 100%;
}
#tblYayinAkisi th
{
background-color: Transparent;
background-image: url(../images/bckSiyahGriTram.png);
background-repeat: repeat-x;
height: 20px;
padding-left: 10px;
}
#tblYayinAkisi td
{
background-color: #222222;
}
#tblYayinAkisi td ul
{
border: 1px white solid;
width: 100%;
margin-left: 10px;
}
#tblYayinAkisi td ul li
{
clear: both;
padding-top: 7px;
list-style: none;
}
#tblYayinAkisi td ul li b
{
margin-right: 10px;
float: left;
}
#tblYayinAkisi td ul li a
{
color: #ffffff;
float: left;
}
</style>
</head>
<body>
<table id="tblYayinAkisi">
<tbody>
<tr>
<th>
YABAN'da bugün
</th>
</tr>
<tr>
<td>
<ul>
<li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
<li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
<li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
<li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
<li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<div style="text-align: center;">
<img src="images/canliYayin.png" />
<img src="images/tumAkis.png" />
</div>
<br />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add this to your first ul declaration:
ul { padding: 0; margin: 0; list-style: none }
You will need to adjust your other ul declaration (i.e. margin-left: 10px) to suit your needs, but this rule will zero it out the differences.
The reason is that each browser uses a different combination of padding and margin to indent the ul. By zeroing out both, and setting only one (i.e. padding or margin) you can keep the display consistent.
Additionally, you need to use a valid DOCTYPE in your code so modern browsers don't revert to Quirks mode. Something like this goes at the very top of your HTML file with NOTHING in front of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You need to set the padding on the ul as well. E.g.
ul {
padding: 0;
}
Related
Changes to my table info on my CSS sheet doesn't seem to be changing when I run run the application. The CSS is mostly pre-generated from when I created the MVC. I just want tables to have borders so I added the "border: solid 2px black" portion. However it doesn't seem to be adding the border. What am I doing wrong here? CSS:
table {
margin-top: 0.75em;
border: solid 2px black;
}
th {
font-size: 1.2em;
text-align: left;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link,
th a:visited,
th a:active,
th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a,
th.desc a {
margin-right: .75em;
}
th.asc a:after,
th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
<table>
<tr>
<th>
Project ID
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
<th>
Test4
</th>
<th>
Test5
</th>
</tr>
</table>
I run your code and table has border!
Maybe there is another css code which Violates your style, so use !important
border: solid 2px black !important;
if you want to border every cell use this code
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
I found the problem, and it's pretty stupid. I needed to refresh the cache (Ctrl + F5). It resulted in the changed CSS.
The image in div element is stretching towards bottom in IE and firefox. But it is displayed well in chrome
IE
Chrome
It looks weird in IE.
can some one help me how to fix.
My HTML.
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div id="mobile">
<div class="header">
<div class="container">
<h1><span>
Välkommen
</span></h1>
<img src="../../published_images/Mobils_logo.png" alt="" />
<div style="clear:both; height:0; overflow:hidden;"></div>
</div>
</div>
<div class="box-links">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>Community</td>
<td>Mail</td>
</tr>
</tbody>
</table>
</div>
CSS
/* Default */
body
{
background: #fff;
margin: 0px;
padding: 0px;
font-size: 100%; /* to set it to 13px*/
font-family: Verdana;
color:#000;
}
* html .clearfix
{
height: 1px;
}
h1, h2
{
color: #444;
font-weight:normal;
padding-top:0;
margin-top:0;
}
h1
{
font-size: 1em;
}
a:link, a:visited, a:active, a:hover, a:focus
{
color: #0096ff;
text-decoration: none;
font-size: 1em;
}
a:hover, a:focus
{
background-color: #0096FF;
color: #fff;
}
table
{
width:100%;
padding:0;
margin:0;
}
td
{
width:50%;
padding:0;
vertical-align:top;
}
/* Header */
div.header
{
height:52px;
padding:28px 5px 0;
}
div.header div.container
{
border-bottom: 1px solid #0096FF;
border-top: 1px solid #0096FF;
padding:5px 0 5px 0;
}
div.header img
{
float:left;
}
div.header h1
{
float:right;
margin-top: 9px;
margin-right: 10px;
}
div.header a
{
clear:both;
}
/* Box Common */
div.box-advert, div.box-links, div.box-back, div.box-footer, div.box-text
{
margin:0 5px 10px;
padding: 8px 10px 8px;
display:block;
clear:both;
}
/* Box Advert */
div.box-links
{
padding-bottom: 0;
}
div.box-links TABLE A
{
color: #626262;
}
div.box-links TABLE a:hover, div.box-links TABLE a:focus
{
background-color: #0096FF;
color: #fff;
}
div.box-links TABLE td
{
padding-bottom:3px;
}
div.box-links ul li A
{
background-image:url("../../published_images/mobil-arrow-blue.png");
background-position:0 6px;
background-repeat:no-repeat;
padding-left:14px;
}
div.box-links ul li A:hover, div.box-links ul li A:focus
{
background-image:url("../../published_images/mobil-arrow-white.png");
}
I see the issue. Its IE specific. The way to fix this is change the order of your link tag and tag. like this
<img src="../../published_images/Mobils_logo.png" alt="" />
<h1><span>Välkommen</span></h1>
Better Sol:
give class to the link, no need to change order
<h1><span>Välkommen</span></h1>
<a class="imgLink" href="index.htm"><img src="../../published_images/Mobils_logo.png" alt="" /></a>
change css from
div.header img
{
float:left;
}
to
div.header .imgLink
{
float:left;
}
I want to achieve something like this by CSS:
I'm a novice with CSS.
My questions:
How can I add a green line to the bottom as below? Will I have to add a small div under the div containing the text and set its background to green? I do know there are many ways to do it but I just want to learn the best practice.
Is this font Arial?
You can either add the div at the bottom as you described, or you can use a border. In either case you'll have some adjustment of heights to do. No big deal.
http://jsfiddle.net/PQgH3/2
div {
width: 50%;
padding-top: 10px;
font-size: 24px;
text-align: center;
font-family: arial, sans-serif;
}
.followers {
background-color: #777;
float: right;
height: 75px;
color: #ccc;
}
.following {
background-color: #555;
float:left;
height: 70px;
color: #ccc;
border-bottom: 5px solid lime;
}
<div class="followers">Followers</div>
<div class="following">Following</div>
I don't have the eye to say whether that font is Arial. I can say that it's a similar sans-serif font if it isn't.
Use CSS sprite sheets. They will help you achieve this effect using images. Generally when you do the markup for the menu use UL and LI tags, then style appropriately for the functionality. Then set it to change the background sprite when the mouse is over then li using the :hover selector. I recommend creating the sprite sheet as an exact image of what you want all the default menu buttons to look like (spanning horizontally). Then do another version below it on the same image that has the look of the hover version. You can repeat this process for any other versions you need like active, disabled, etc. Just make sure you offset the Y value of the background position for each version. Such as this:
li { background-position: 0px 0px; }
li:hover { background-position: 0px -100px; }
li:active { background-position: 0px -200px; }
Check out this article for a bit more information regarding the markup as well as the design aspect:
http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Edit:
If you don't want to do sprite sheets I have a jsFiddle of pure css3 way of doing it here:
http://jsfiddle.net/uBhKF/
HTML Markup:
<ul>
<li>FOLLOWING</li>
<li>FOLLOWERS</li>
</ul>
CSS3:
ul {
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
}
li {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
float: left;
width: 50%;
height: 50px;
display: block;
margin: 0px;
background-color: #444;
border-left: 1px dotted #DDD;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 24px;
text-align: center;
line-height: 50px;
color: #888;
}
li:first-of-type {
border-left: none;
}
li:hover {
color: #55E000;
border-bottom: 5px solid #55E000;
background-color: #333;
}
But I couldn't get the font-family right. :(
use this
.header
{
margin-left: auto;
margin-right: auto;
height: 102px;
background-color: #F0F0F0;
width:500px
}
.header .header-first
{
float: left;
width: 216px;
border-bottom: 3px solid #3CA2DF;
}
.header .header-last
{
width: 216px;
float:right;
}
The Font is not Arial for sure, i believe its calibri, and try this code for you solution
<html>
<body>
<div style="border-bottom: 3px solid #00ff00;
background:#000;
height: 50px;
width:400px;
color:#00ff00;
text-align:center;">
FOLLOWERS
</div>
</body>
</html>
Also try this
<html>
<head>
<style>
td
{
width:400px;
background:#000;
color:#fff;
text-align:center;
height: 100px;
font-size:20px;
}
td:hover
{
text-decoration: underline;
border-bottom: 3px solid #00ff00;
color:#00ff00;
}
</style>
</head>
<body>
<table style="margin:0 auto;">
<tr>
<td>Following</td>
<td>Followers</td>
</tr>
</table>
</body>
</html>
I have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it
this is my master page code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/UM.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
</Items>
</asp:Menu>
</div>
</div>
</div></h1>
<div class="main" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</form>
</body>
</html>
the below is the css
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
height: 192px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 950px;
height:auto;
background-color: #fff;
margin: 10px auto 5px auto;
border: 1px solid #496077;
}
.header
{
position:relative;
margin: 0px;
padding: 0px;
background: #E30613;
width: 100%;
top: 0px;
left: 0px;
height: 90px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #E30613;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 0px 0px 0px;
min-height: 630px;
width:auto;
background-image:url('UMBackground.png');
}
.leftCol
{
padding: 6px 0px;
margin: 0px 0px 0px 0px;
width: 200px;
min-height: 200px;
width:auto;
}
.footer
{
color: #4e5766;
padding: 0px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#E30613;
width: 950px;
height: 35px;
margin-top: 0px;
}
div.menu
{
padding: 1px 0px 1px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 5px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #E30613;
border: 1.25px #00BFFF solid;
color: #F5FFFA;
display:inline;
line-height: 1.35em;
padding: 10px 30px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000000;
color: #F5FFFA;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #E30613;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: 947px;
height: 132px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
This is just the way webkit browsers (safari and chrome, etc) render the html file input type.
See this jsbin for an example of the file input tag.
See HTML input type="file" in Chrome does not show textbox for a previous answer.
I'd tell you to look up "css/html browser fixes". Different browsers show webpages differently. Internet Explorer is often the browser with the biggest visual differences.
Of course the page will look different on different browsers.
You have body {font-size: .80em;} and the em is a relative size, which means that the font size on the web page is 80% of the browser's default font size.
Since the browser's default size can vary (it is always user selectable) this means that you can't use this method if you aim for browser interoperability. Ditto with the line height.
Either keep the user's preferences (and accept that different users will see different things), or choose a font size in pixels or points.
Note that if you have set a size this way in the body, you can use em elsewhere, which will then be relative to this body size. So things like h3 {font-size:1.2em} are perfectly OK.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
ive managed to center it in firefox and chrome but it doesnt work in IE8.
Also a scrollbar appers att the bottom in IE8.
Here the site hugoth
and heres the css:
ul {
font-family: Arial, Verdana;
font-size: 14px;
display:block;
padding: 0;
list-style: none;
width: 100%;
margin: 0px 0px 0px 40px;
padding: 0px 0px 0px 30px;
text-align: center
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
Thanks in advance
Alex
I was feeling generous, so I remade your entire page with better code (no more nested tables for layout).
Live Demo
Oh, and I centered your menu for you.
If you have any questions, let me know.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hugoth</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
font: 12px Tahoma, sans-serif
}
#container {
margin: 0 auto;
width: 754px;
border-left: 2px solid #333;
border-right: 2px solid #333;
}
#header {
background: url(http://hugoth.com/test2/images/top.jpg) no-repeat;
height: 150px
}
#header h1 {
display: none
}
#content {
background: #666
}
#menu {
height: 40px
}
#middle {
clear: both;
margin: 0 auto;
width: 474px;
padding: 15px;
background: #fff;
text-align: center;
font-family: Tahoma, sans-serif;
font-size: 11px
}
#middle p {
margin: 21px 0
}
#middle .important {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold
}
#footer {
padding: 11px 0;
text-align: center;
color: #fff;
font-size: 11px
}
#footer a {
color: #f90;
text-decoration: none
}
#footer a:hover {
text-decoration: underline
}
/* dropdown section */
#menu {
font: 14px Arial, Verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
margin-left: 73px;
}
#menu ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none
}
#menu li {
display: block;
position: relative;
float: left
}
#menu li ul {
display: none
}
#menu li a {
display: block;
text-decoration: none;
color: #fff;
border-top: 1px solid #fff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-right: 1px;
/*white-space: nowrap*/
}
#menu li a:hover {
background: #617f8a
}
#menu li:hover ul {
display: block;
position: absolute
}
#menu li:hover li {
float: none;
font-size: 11px
}
#menu li:hover a {
background: #617f8a
}
#menu li:hover li a:hover {
background: #95a9b1
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<ul id="menu">
<li>Home</li>
<li>Our Firm
<ul>
<li>About Us</li>
<li>Executive</li>
<li>Board</li>
</ul>
</li>
<li>Client Services
<ul>
<li>Internationalization</li>
<li>Business Thriving Advisory Board</li>
<li>Venture Engine: supporting start-ups and smaller companies</li>
<li>Financial Services</li>
</ul>
</li>
<li>Industry Practices
<ul>
<li>Clean Technology</li>
<li>Med Technology</li>
<li>Other</li>
</ul>
</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
<div id="middle">
<p class="important">This site is under construction</p>
<p class="important">Hügoth AB<br />Scheelevägen 15<br />223 70 Lund, Sweden</p>
<p>For questions or other matters please contact any of the below: </p>
<p>Bo Unéus • + 46 (0)70 - 6773656 • bo.uneus#hugoth.com</p>
<p>Lottie Norrsén • + 46 (0)70 - 4248321 • lottie.norrsen#hugoth.com</p>
<p>org.nr. 556306-0986</p>
</div>
<div id="footer">
www.hugoth.com © 2011 • Privacy Policy • webmaster#hugoth.com
</div>
</div>
</div>
</body>
</html>
Not sure about the centering issue. Have you tried using the XHTML doctype instead of the HTML docytype?
As far as the scroll bar, it looks like the banner is too wide. Try either trimming the image or widening the div