|
CSS - Ie6 Adds Several Pixels To Height On An Element
I'm trying to create an image-navigation system using the popular css sprites technique. However, on the very first image (doesn't occur with any images following), IE6 (and below) increases the height of that image.
Here's a very simple code. There are no other codes or elements to interfere with this issue, and yet, it is still present. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style type="text/css">
.nav_top{background:url('http://i185.photobucket.com/albums/x14/mMaNgOeZz/nav-1.gif'); float:left; }
#img1{background-position: 0px 0px; width: 1200px; height: 14px; }
#img2{background-position: 0 -14px; width: 101px; height: 34px;}
</style>
</head>
<body>
<a class="nav_top" id="img1"></a>
<a class="nav_top" id="img2"></a>
</body>
</html>
Any help would be appreciated to no end. Thanks in advance. Similar TutorialsHi there Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div? I set the width of div, via margin Code:
div#footer {
margin: 0px 9%;
height: 40px;
}
When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height. This does not happen in other (gecko) browsers! Anyone know a solution, (tantek won't be precise enough with %) ?? I have a div that just serves as a horizontal rule, it's 800px wide and 3px high. Firefox renders it properly, but internet explorer is adding 10 pixels totaling 13 pixels high. I have tried the traditional <hr> tag, but it adds an ugly subtle border around it in IE that can't be removed. EDIT: sorry, I forgot to mention that it's internet explorer version 6 The markup: Code:
<div id="header">
<div id="banner">
</div>
<div id="nav">
<div id="floatleft">
</div>
<div id="floatright">
</div>
</div>
</div>
<div id="header_hr">
</div>
<div id="main">
</div>
The CSS: Code:
#header
{
margin:0 auto;
width:800px;
font-size:11px;
}
#banner
{
background-image:url('../images/banner.jpg');
height:29px;
width:800px;
}
#nav
{
width:800px;
}
#floatright
{
float:right;
}
#floatleft
{
float:left;
}
#header_hr
{
background-color:#464646;
clear:both;
height:3px;
margin:0 auto;
width:800px;
border:0;
}
#main
{
width:800px;
margin:0 auto;
}
Here's the output: Is there a size difference between css pixels and html width pixels? The question I ask is because I am using the embed code from flickr and vimeo`s width of 220 and the search input bar in css is set to 220px, but when viewed through a browser they have different lengths. Is there a solution for making it the same length? I seem to recall that CSS1 or 2 had a property that could be set to specify the height of a text input box or check box or radio button, but it's been a while since I've done it and I can't find it in my notes or find the search terms that will turn up what I'm looking for, or even the page that I did it on. I thought
Code: <input type="text" style="{ height: Xpx; }">
would do it, but it doesn't. Here's some of my code ... xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta> <meta http-equiv="Content-Language" content="en-US"></meta> <style type="text/css"> body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif } div { } table { width: 100%; border: none } tr { } td { } .right { text-align: right } ul { margin: 0px; padding: 0px; list-style: none } li { padding-left: 25px } label { } input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; } .textrightinput { text-align: right; height: 18px } .textleftinput { text-align: left; height: 18px } .buttoninput { height: 18px } </style> <title>Donations</title> </head> <body> <!-- Begin Body Table --> <div> <form id="form" action="https://my.domain.com/donate/" method="post"> <fieldset> <legend>Select the project(s) you wish to support.</legend> <input type="hidden" name="cc" value="checkEntries" /> <table> <tr> <td> <ul> <li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li> <li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" /> Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li> <li class="center"><label> Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li> </ul> </td> </tr> <tr> <td class="right" colspan="2"> <input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." /> </td> </tr> </table> </fieldset> </form> </div> <!-- End Body Table --> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="Content-Language" content="en-US"></meta>
<style type="text/css">
body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif }
div { }
table { width: 100%; border: none }
tr { }
td { }
.right { text-align: right }
ul { margin: 0px; padding: 0px; list-style: none }
li { padding-left: 25px }
label { }
input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; }
.textrightinput { text-align: right; height: 18px }
.textleftinput { text-align: left; height: 18px }
.buttoninput { height: 18px }
</style>
<title>Donations</title>
</head>
<body>
<!-- Begin Body Table -->
<div>
<form id="form" action="https://my.domain.com/donate/" method="post">
<fieldset>
<legend>Select the project(s) you wish to support.</legend>
<input type="hidden" name="cc" value="checkEntries" />
<table>
<tr>
<td>
<ul>
<li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li>
<li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" />
Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li>
<li class="center"><label>
Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li>
</ul>
</td>
</tr>
<tr>
<td class="right" colspan="2">
<input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- End Body Table -->
</body>
</html>
Can you see what I'm doing wrong? screenshot.bmp I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh Hi I am a blogger user and write an English blog. I want to add a section in my blog's sidebar for adsense. It is a three column template, what I want it to add a single column at the top of 2 columns of sidebar. http://linguisticslearner.blogspot.com/ And below is the template code. Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='JAoqkG38S809dZLsa5uoS08FSskzqxBwsprrllDajqY' name='google-site-verification'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Grid Focus
Designer: Derek Punsalan
URL: www.5thirtyone.com
Updated by: Amanda Fazani (www.BloggerBuster.com)
Date: 14 August 2008
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#333" value="#333333">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#555" value="#555555">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#555" value="#555555">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#333" value="#333333">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#333" value="#333333">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="bordercolor" description="Border Color"
type="color" default="#eee" value="#eeeeee">
<Variable name="metacolor" description="Meta DataColor"
type="color" default="#7f7f7f" value="#7f7f7f">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 95% Arial, sans-serif" value="normal normal 95% Arial, sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
html, body {
background:$bgcolor;
color:$textcolor;
text-align:center;
margin: 0;
padding: 0;
font:12px arial,helvetica,verdana,sans-serif;
}
body #navbar-iframe {
display: none;
visibility: hidden;
height: 0px;
}
/* Headings
----------------------------------------------- */
h1{font-size:22px; color: $pagetitlecolor;}
h1 a{color: $pagetitlecolor;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:$linkcolor;text-decoration:none;}
a:hover{color:#666;}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
/* masthead / footer - navigation and categories */
#masthead{padding:5px 0;}
#masthead h1 a{text-transform:uppercase;width:400px;float:left;margin:12px 0 0 0;color:$pagetitlecolor;}
#masthead h1 a em{font-style:normal;color:$pagetitlecolor;}
#authorBlurb {width: 400px; float: right; color: $descriptioncolor;}
#authorBlurb img{float:right;width:42px;height:42px;border:3px solid $bordercolor;}
#authorIntro a{font-weight:bold;}
#authorIntro{line-height:1.4em;width:400px;float:right;margin:8px 0 0 0;}
#header-wrapper {
margin:0 auto 10px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
color:$pagetitlecolor;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
ul.nav{list-style:none;background:$bordercolor;padding: 0; margin-left: 0;}
.nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:$titlecolor;text-decoration:none;display:block;padding:5px 0 12px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:$metacolor;text-transform:lowercase;}
.nav li a:hover{background:$titlecolor;color:$bordercolor!important;width:95px;}
* html .nav li a:hover{background:$titlecolor;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;display:block width:100px;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover { background: transparent;color: $titlecolor !important;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;}
* html .fix{height:1%;}
.fix{display:block;}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
border-top:3px solid $bordercolor;
margin:20px auto;
width:965px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
margin:26px 0 0 0;
width:410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
color:$sidebartextcolor;
float:left;
margin:25px 0 0 33px;
width:250px;
line-height:1.3em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar h2 {color: $sidebarcolor;}
.sidebar ul{list-style:none;margin:8px 0 4px; padding-left: 0px;}
.sidebar ul li{
background:url('http://4.bp.blogspot.com/_0CLPmP1ydOo/Sa7zbixhCTI/AAAAAAAABNQ/GPsIktrM5tw/s1600/li.gif') no-repeat 0 3px;
color:$sidebartextcolor;
line-height:1.2em;
border-top:1px solid #BBB;
padding-left:16px;
padding-right:0;
padding-top:4px;
padding-bottom:4px;
}
#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}
#tertCol {color:$sidebartextcolor;}
#tertCol{float:left;width:214px;margin:10px 0 0 33px;}
#tertCol p{color:$sidebartextcolor;}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.postMeta{background:url('http://bloggerbuster.com/templates/grid-focus/images/dot.gif') repeat-x left center;text-transform:uppercase;font-size:11px;text-align:right;margin-bottom:5px}
.postMeta span.date{background:$bgcolor;color:$metacolor;padding:0 2px 0 4px;}
.postMeta span.comments{background:$bgcolor url('http://1.bp.blogspot.com/_0CLPmP1ydOo/Sa7yyg4qFKI/AAAAAAAABNI/2P6HSCDx4-g/s1600/chat_grey.gif') no-repeat left center;padding-left:15px;margin-left:2px}
.postMeta span.comments a,
.postMeta span.date a{color:$metacolor;}
.post{margin:0 0 15px 0;}
.post h2{line-height:1.2em;margin-bottom:7px;font-size: 18px;color:$titlecolor;}
.post h2 a{width:100%;display:block;outline:none;color: $titlecolor;}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
border: 3px solid $bordercolor;
padding: 5px;
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
font: $postfooterfont;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment-general {background:$bgcolor ') top left;
border:1px solid #BBB;
margin-bottom:7px;
padding:0 7px 7px;
}
.comment-blog-author {background:$bgcolor url('http://3.bp.blogspot.com/_0CLPmP1ydOo/Sa7zz4pTw_I/AAAAAAAABNY/7lF8YVNW-Go/s1600/lgrey_diag.gif') top left;
border:1px solid #BBB;
margin-bottom:7px;
padding:0 7px 7px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager { clear: both; margin: 10px 0;}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.3em;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer-wrapper {
margin: 10px 0;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
.left {float: left;}
.right {float: right;}
.ctime {float: right;}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div class='masthead fix'>
<b:section class='masthead' id='masthead' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Thoughts in Remote Language (Header)' type='Header'/>
</b:section>
</div>
<div class='nav'>
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='http://awaz-e-dost.blogspot.com/' title='آوازِ دوست'>Link<br/><span>My Urdu Blog</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='skip'><a href='#main' title='Skip to content'>Main<br/><span>Skip to content</span></a></li>
</ul>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<div id='searchWrap'>
<form action='/search' id='searchForm' method='get'>
<input id='s' name='q' type='text' value=''/><input alt='Submit' id='searchsubmit' src='http://bloggerbuster.com/wordpress/wp-content/themes/grid_focus_public2/images/btn_search.gif' type='image'/>
</form>
</div>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Gadget1' locked='false' title='Share It' type='Gadget'/>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Follow Me' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='tertCol'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Gadget2' locked='false' title='' type='Gadget'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='LinkList1' locked='false' title='Favorite Links' type='LinkList'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>*</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper' style='margin-top: 10px;'>
<div class='nav' style='clear: both;'>
<ul class='nav fix'>
<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
</ul>
<p><a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. <a href='http://5thirtyone.com/grid-focus' title='Grid Focus by: Derek Punsalan'>Grid Focus</a> by Derek Punsalan <a href='http://5thirtyone.com'>5thirtyone.com</a>. Converted by <a href='http://www.bloggerbuster.com/'>Blogger Buster</a></p>
</div>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-15934010-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
I know very little about CSS, my wild guess is that I should change 'wrapper' classes in CSS but how? I do not know this. Can you please help me in this regard? Many Thanks Hi guys. If you look at this link he http://www.geocities.com/jezman2002/index.html You will see that the space between the first link 'Company Profile' and the second link is bigger than the others. This ok until u click on the link 'Case Studies' .. you'll see that the two pixels are evident and the indicator GIF next to the link is higher than I desire. This is not the case for Mozilla, Netscape .. EVEN OPERA !!! But IE just doesn;t like it? Do you have any suggestions as to what is causing this, so i can avoid it in future ? Thanks. Hello. I have this page, and it has been working well so far with the image and table. http://www.pixelrev.net/web/ However, as you may notice, in Firefox (haven't tried in IE yet) the right column TD is one pixel above and below the image on the left. I need it to match up exactly. Can anyone fix up my code, and repost it here so it will work? Thanks. Hi there. A very frustrating problem and so simple a situation . I have two divs, one stacked on top of the other. Nothing special with positioning or anything. Total barebones stuff. If I put an image (whether with image tag or as background-image) in the top div, the div will be padded on the bottom. This only happens in IE. As an example I have my page he URL The top div bgcolor is lime green, and you'll see it adds some extra space under the image. Compare in IE & FireFox and you'll see what I mean - green can be seen under the image in IE. The bottom of the image in the top div should be butted up against the top of the second div, whose bgcolor is red. No green should exist between the image and red. Thanks for any help, this should be rediculously simple for someone who knows CSS quirks well. page passed validation - xhtml 1.0 @ w3c.org dear all, some simple divs of mine seem to be rendering differently in IE6 and IE7. for example, the following style works fine in IE6... Code:
#calHourNow {
background-color: #FFFF66;
margin:0px;
padding:0px;
width:50px;
height: 120px;
border-top:1px solid #999999;
border-right:1px solid #999999;
color:#000000;
font-weight:bold;
font-size:14px;
text-align:right;
font-family:"Times New Roman", Times, serif;
}
... I am left with a 12o x 50 px box (which is repeasted down the page) but in IE7 it seems the 1px border is added to the width and height, leaving me with a div that is actually 121 x 51 px. It is completely vital for my project (an outlook style calendar) that the dimensions of these divs are exactly the same on both browsers, is there a way round this? Many thanks, Mark Hi, I am new here, asked this question at another forum and never got an answer so I hope someone here can help. "Is there any way to remove 200px from the bottom of my site and keep the same layout using divs? I had to give the wide div next to the thin one a top: -208px to get it to line up with the thin one. and then I had to bring up the copyright one the same way so it lined up under them. Now I am stuck with an extra 200px under them (really it's 208, but I want an 8px space at the bottom)." Site: http://www.kendallstudios.com/index2.php CSS File: http://www.kendallstudios.com/styles/standard.css http://www.richarddoyle.net/tests/float is what I'm currently working on, trying to get a basic layout together. I'm pretty close to what I want, except you'll notice the white box is touching the nav area. I want about 20 pixels of space between the two, and the background gray to show through. They're touching because I'm currently only floating one element, but if I float both the content goes below the nav in Firefox. I tried not floating anything and using relative positioning to move the content up and into place, but of course that causes the page to be much longer because it still takes up the area the content would have taken up. I'm guessing how I'm structuring my code is flawed. Help! im trying to fix my website layout to show up the same in IE and firefox. right now the demensions are fine in firefox. in IE they show up to be too big http://mrsako.gotdns.com/index.php i made a class for the TD on the left (where the green part is as you can see in FF. im pretty sure the whole problem involves that im trying to set a certain width to a TD instead of a Table. heres the CSS Code:
A:link{color:#ADD8E6;text-decoration:underline}
A:visited{color:#ADD8E6;text-decoration:underline}
A:active{color:#ADD8E6;text-decoration:underline}
A:hover{color:#ADD8E6;text-decoration:underline}
#mastertable {max-width: 1024px;}
#max800{max-width: 800px}
#max750{max-width: 750px}
#max500{max-width: 500px}
#max400{max-width: 400px}
TD{text-align: left; }
#tLeft{text-align:left; vertical-align:top;}
.right{text-align: right;}
textarea, submit{background-color:#19665a;}
table.nounderline a, table.nounderline a:link, table.nounderline a:visited, table.nounderline a:active, table.nounderline a:hover {
text-decoration:underline
}
table.trhover tr:hover {
background-color:#0b5b4e;
}
.container{
border-style: none;
border-width: thin;
padding:0;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
}
.PlainTable{
border-style: none;
padding:0;
}
.topbarTD{
border-style: none;
border-width: thin;
padding:0;
height:187px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/2newbanner.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:bottom;
}
.innertopbarTD{
border-style: none;
border-width: thin;
padding:0;
width:290px;
height:24px;
background-image:url("images/fluidgoldline.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.LeftSideLinks{
border-style: none;
border-width: thin;
padding:0;
width:159px;
width: expression(document.body.clientWidth < 159 ? "159" : "auto" );
height:474px;
background-image:url("images/space.gif");
background-repeat: repeat-y;
text-align:right;
vertical-align:top;
}
.TopPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
width: expression(document.body.clientWidth > 865 ? "865" : "auto" );
height:99px;
background-image:url("images/toppagespace.gif");
background-repeat: no-repeat;
text-align:right;
vertical-align:top;
}
.ExtraPageSpace{
border-style: none;
border-width: thin;
padding:0;
width:865px;
height:99px;
background-image:url("images/miniextrapagespace.gif");
background-repeat: repeat-y;
text-align:left;
vertical-align:top;
}
.BottomBorder{
border-style: none;
border-width: thin;
padding:0;
height:107px;
max-width:1024px;
width: expression(document.body.clientWidth > 1024 ? "1024" : "auto" );
background-image:url("images/bottomborder.gif");
background-repeat: no-repeat;
text-align:center;
vertical-align:top;
}
heres the html Code:
<table height="768" class="container" cellspacing="0" summary="Foo dot Com">
<tr>
<td class="topbarTD" colspan="2"><table class="innertopbarTD" cellspacing="0" align="right"><tr><td class="right">Please <a href="login.php" title="Login">Login</a> or <a href="register.php" title="Sign-Up">Sign-up</a><font size="2" color="red">    </font> </td></tr></table></td>
</tr>
<tr>
<td class="LeftSideLinks" rowspan="2" align="right">i thoguht i saw a putty cat i thought i saw a***** cat</td>
<td class="TopPageSpace"><font size="26"></font><img src="images/fluidtoppage.gif" height="99"></td>
</tr>
<tr>
<td class="ExtraPageSpace">
<div style="text-align:center;">
<h2>Foo.com<br>
Game Servers and VOIP Servers<br>
admin@foo.com</h2>
</div>
</td>
</tr>
<tr>
<td class="BottomBorder" colspan="2">
<table border="0" height="107" summary="Navigational Links">
<tr><td width="159"><!-- side -- ></td>
<td width="865"><center>
<br><a href="index.php" title="Home">Home</a> - <a href="services.php" title="Services">Services</a> - <a href="contact.php" title="Contact">Contact</a> -
<a href="login.php" title="Login">Login</a><br>
<a href="faq.php" title="Frequently Asked Questions">FAQ</a> - <a href="termsofservice.php" title="Terms and Conditions, Acceptable Use Policy, Legal Information">Terms and Conditions</a><br>
Copyright © 2006 Foo. All Rights Reserved<br>
<small>All logos and images are the trademarks of their respective owners.</small>
</center>
</td></tr></table>
</td>
</tr>
</table>
i know theres some table tags which i havent taken out yet, im in the process of trying to convert everything i can to CSS edit: i forgot to mention my problem the left side green bar is supopsed to be 159px wide. in firefox it shows the correct width, byt in IE it thinks 159px is almost double that Hi guys, I'm pretty new to CSS. I had this style sheet set up, and it was working in Firefox just fine. When I tested it on IE, the center logo instead of being approximately 15 pixels down from the top, it's right at the top. I was able to get those 15 pixels to appear in IE with 2 changes, but now there is an extra 15 pixels in Firefox, so it is down approx. 30 pixels. Can anybody see what I'm doing wrong, or provide a hack that will fix it? css Code: Original - css Code /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ body { margin:0px; margin-bottom:50px; padding:0px; text-align:center; background-image:url(../images/bg-grn2.gif); } a:link {color:#0000EF;} a:active {color:#EF0000;} a:visited {color:#52188C;} div#FS-Logo { position:absolute; top:10px; left:10px; height:110px; width:100px; background:url(../images/left-logo.gif) top left no-repeat; margin:10px; padding:0; } div#FWS-Logo { position:absolute; top:10px; right:10px; height:110px; width:100px; background:url(../images/right-logo.gif) top right no-repeat; margin:10px; padding:0; } div#Header { width:300px; height:140px; /*change this to 155px*/ margin:0px auto; text-align:center; font-family:"Trebuchet MS", serif; background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/ } div#Main-content { width:55%; height:500px; margin:0px auto; text-align:left; padding:0px; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Left-column { position:absolute; top:155px; left:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Right-column { position:absolute; top:155px; right:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Footer { position:static; bottom:10px; right:15px; width:100%; margin:0; padding:0; text-align:center; font-family:verdana, sans serif; font-size:14px; } .hd-header {color:#8A4B2C;} .hd-footer {color:#000000;} .hd-main {color:#FFFFFF;} /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ My html page is this. html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> Hi all, I am trying to convert my font info as global.css instead of hard coding it in every file. Code:
<font size="2" face="Arial, Helvetica, sans-serif">text</font>
to
.myFont {
font-size:14px; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
But is not coming out the same in ie, why? Any help would be greatly appreciated. Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly. The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve I assume that the problem lies with the stylesheet in these two sections... Code: #menu {
position: absolute;
top: 115px;
left: 145px;
width: 50px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
margin-top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 200;
}
a.tab, a.tab:link {
background-color: #222222;
border: 1px solid #EFEFEF;
padding: 12px 0em 12px 10px;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
float: left;
width: 95px;
margin: 5px 0px 5px 0px;
text-decoration: none;
}
a.tab:visited {
color: #FFFFFF;
}
a.tab:hover {
background-color: #666666;
color: #FFFFFF;
}
a.tab:active {
color: #FFFFFF;
}
a.tab.activeTab, a.activeTab:link {
border-right-width: 0px;
width: 100px;
background-color: #000000;
}
and Code: .rightContent {
float: right;
width: 535px;
background-color: #000000;
border: 1px solid #EFEFEF;
margin-left: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
text-align: center;
color: #FFFFFF;
}
The (X)HTML for this section looks like this... Code: <div id="menu"> <a class="tab activeTab" href="http://www.paularms.com">Home</a><br /> <a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br /> <a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br /> <a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br /> <a class="tab" href="http://www.paularms.com/about/index.html">About</a><br /> </div> <div id="content"> <div class="rightContent"> .......... Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem. Thanks everyone. Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim |
|||||||