|
CSS - 2 Issues In Ie Padding And Sizing
Okay this is still the same page I posted about but a little different problem as I fixed the other one.
In IE my wrapper is extending way beyond 770px to about 991px. You can see this in the image below. It shows the green border way beyond where the main content ends to the right. Edited to add that I figured out my problem with the image aligning to the right. I had 2px padding set all round on the container box for it All the content looks correct in FF (suprise suprise). My CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
width: 770px;
}
/* column container */
#colcont {
float: left;
width: 550px;
}
/* columns */
#lcol {
float: left;
width: 180px;
max-width: 180px;
vertical-align: top;
}
#mcol {
float: right;
width: 366px;
vertical-align: top;
}
#rcol {
float: right;
width: 210px;
max-width: 210px;
margin-left: 10px;
vertical-align: top;
}
/* login box */
.metro_wrap {
width: 200px;
margin-left: 10px;
}
.login_top {
width: 200px;
height: 260px;
background: #54B043 url(/theme/Metrocom/login_top.gif) top right no-repeat;
}
.metrologin {
background: #54B043 url(/theme/Metrocom/login_bottom.gif) no-repeat;
height: 588px;
color: #FFFFFF;
vertical-align: top;
}
.loginbar {
background: #54B043;
padding: 4px;
color: #FFFFFF;
font-weight: bold;
height: 34px;
}
HTML -- This is the DIV that holds the image Code: <div class="metro_wrap">
<div class="login_top"></div>
<div class="loginbar">
Welcome to www.tdsmetro.net.<br />
Please sign in.
</div>
<div class="metrologin">
<?if($msg) {?>
<span class="autherr">$msg</span>
<?}?>
<div class="login">
<form class="nopad" action="/login.php" method="post" onsubmit="return(ck_login(this.user));">
<input class="login" type="text" name="user" maxlength="50" size="24" />
<br />
<strong>User Name</strong> (joe.smith@tds.net)<br /><br />
<input class="login" type="password" name="pass" maxlength="30" size="24" />
<br />
<strong>Password</strong><br /><br />
<div align="center">
<input class="login" type="submit" value="Sign In" name="submit" />
</div>
</form>
</div>
<br />
</div>
</div>
Here is the way that the divs are laid out. I didn't want to put evertyhing because it'd be huge. Code:
<div id="wrapper">
...some nav stuff...
<div id="colcont">
<div class="animetro_news">
some more stuff
</div>
<!-- Left Column -->
<div id="lcol">left column</div>
<!-- Middle Column -->
<div id="mcol">middle</div>
</div> <!-- end colcont-->
<!-- Right Column -->
<div id="rcol">right column</div>
</div> <!-- end wrapper -->
Similar TutorialsHi All, Im giving my site a slight update, but have encountered a strange IE problem. Saying that i have nothing but problems with IE some days with both 6 and 7. The menu system seems to work fine in Safari and firefox, however in IE the last tab seems to go to the next line. I think it may be a problem with the padding/margin however thats only a guess. Any help would be appreciated. Thanks Here is the link: http://www.michaelpalmer.info/new/index.php Here is the full CSS code: http://www.michaelpalmer.info/new/css/style.css Here is the CSS code for the menu system: css Code: Original - css Code /************ pageMenu ************/ #pageMenu { background: repeat url(../images/pageLayout/pageMenu.gif); width:780px; margin: 0px auto; border-left: 1px solid #000000; border-right: 1px solid #000000; } .menuButton { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/blackDot.gif) bottom repeat-x; color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrent { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrent.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentLeft { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentLeft.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentRight { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentRight.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ .menuCurrentLeft a { color: #000000; text-decoration: none; } menuCurrentLeft a:hover { color: #000000; text-decoration: none; } .menuCurrentRight a { color: #000000; text-decoration: none; } menuCurrentRight a:hover { color: #000000; text-decoration: none; } .menuCurrent a { color: #000000; text-decoration: none; } menuCurrent a:hover { color: #000000; text-decoration: none; } .menuButton a { color: #ffffff; text-decoration: none; } .menuButton a:hover { color: #dba549; text-decoration: none; } /************ pageMenu ************/ /************ pageMenu ************/ Heres the code for the html html Code: Original - html Code <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> The site can be viewed he http://oharenoise.org/new/ I am having issues with padding on this newly revised website, specifically in the left column division. For example, I'd like the "Special Information" heading to have larger padding above it & less padding below. No matter what values I enter into the padding attributes, nothing changes. I'm having the same problem with the "Featured Publications" too, further down the page. Nevermind guys, I figured it out. I looked back at an old thread I posted about a year ago with the same issue. The fix was to add vertical-align: top; to the flt_rt img css. ========================================== This issue is affecting both FF (3) and IE (6)...I haven't tested in another browser yet. I just inherited this site and am in the process of converting it from a table layout to valid css. EVerything's going pretty well with the exception of my right column images. An approximately 5px gap is appearing so the images do not fit flush. I have looked at this so long that I can't see where it's happening and would appreciate another set of eyes. This version of the site is on a private test server, so I've attached screenshots. In each screenshot you will see the gap colored in green. In FF it appears below the images, while in IE it's appearing in between. Thanks in advance! Here is my css: Code:
@charset "UTF-8";
body {
background-color: #191919;
margin-top: 5%;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: #000000;
padding-left: 30px;
padding-top: 30px;
text-align: left;
}
.heading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #B3DB10;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.style2 {
color: #FFFFFF;
background-color: #7d990b;
display: block;
position: static;
padding-left: 8.5px;
height: 18px;
padding-top: 5.5px;
}.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
color: #333333;
}
.heading3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #999999;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.maintext2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 200%;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
color: #CCCCCC;
}
.heading4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #CCCCCC;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 0px;
}
HTML (with some content removed) Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home - .</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {color: #B3DB10}
-->
#container {
width: 925px;
height: 600px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#nav {
float: left;
width: 200px;
height: 425px;
background-color: #b3db10;
}
#nav ul {
margin: 27px 0 0 0;
padding: 0;
}
#orion_logo {
border: none;
}
#rcol {
float: right;
height: 425px;
width: 725px;
}
#heading {
float: left;
height: 47px;
width: 475px;
background-color: #ababab;
padding: 53px 0px 0px 30px;
margin: 0;
font: 20px normal;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
#maintext {
clear: left;
float: left;
background-color: #FFFFFF;
height: 325px;
width: 505px;
text-align: left;
}
#flt_rt {
float: right;
width: 220px;
height: 425px;
background-color: green;
padding: 0;
margin: 0;
}
#flt_rt img {
padding: 0;
margin: 0;
}
#heading2 {
clear: both;
height: 155px;
width: 725px;
background-color: #000000;
text-align: left;
padding-left: 200px;
padding-top: 20px;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="nav">
<a href="http://">
<img src="images/logo.png" width="200" height="100" alt="Orion logo" title="http://www..com" id="orion_logo"/>
</a>
<ul id="MenuBar1" class="MenuBarVertical">
<li><span class="style2"> Home</span> </li>
<li><a href="02.html"> Proven Credibility</a></li>
<li><a href="03.html"> Leading-Edge Products</a> </li>
<li><a href="04.html"> Benefits of the Program</a></li>
<li><a href="05.html"> Benefits of the Products</a></li>
<li><a href="06.html"> Benefits of the Partnership</a></li>
<li><a href="07.html"> Contact</a></li>
<li><a href="http://www.com/login.asp"> Partner Login</a></li>
</ul>
<a href="07.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/apply2.gif',1)"><img src="images/apply1.gif" name="Image4" width="100" height="20" hspace="50" vspace="30" border="0" id="Image4" /></a>
</div> <div id="rcol">
<h1 id="heading">Stake Your Claim in a Billion Dollar Industry!</h1>
<div id="flt_rt">
<img src="images/orion2.jpg" width="220" height="216" alt="" /><img src="images/orion05.jpg" width="220" height="209" alt=""/>
</div>
<div id="maintext">
<p class="maintext">text here<br />T</p>
<p class="maintext">text here</p>
<p class="maintext"><strong></strong>, President and CEO</p>
</div>
</div>
<div id="heading2">
<span class="maintext2">The U.S. Retrofit Market Opportunity:</span>
<span class="heading4"><span class="style3">text<br />
<span class="style3">20.6 billion</span> square feet need to be retrofitted*<br />
<span class="style3">$9.6 billion</span> retrofit market size</span>
<span class="maintext2">*Source: EIA 2003</span>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div> <!-- end container -->
</body>
</html>
Hi. I'm trying to update a site to use CSS instead of tables and I'm having some issues with the top banner and the lovely IEs. Basically, IE6 seems to be acknowledging some padding/margins for my "banner" div and both IE6 and 7 have some extra spacing below my H1/logo image that Firefox/Opera properly display. I put up a screen shot of Firefox (far left), IE7 (middle), and IE6 (upper right) showing the discrepancies at "hxxp://ns1.zivix.com/~mbydalek/sample/Screenshot.png" Here are the specific problems that I am trying to fix: 1) The floated H1 (background green) should have 0 spacing at the bottom, yet IE6/7 both show some extra green indicating some extra spacing 2) IE6 has the banner a few pixels off to the right and actually a couple pixels taller than it's supposed to be, which is the height of the floated right image. I put the code and css up at: hxxp://ns1.zivix.com/~mbydalek/sample/admin.html hxxp://ns1.zivix.com/~mbydalek/sample/css/master.css Any help would be greatly appreciated! Regards, Mike * On a side note, how the heck do you post URLs (with or without bbcode) on these forums? Any url I try (even if I copy/paste directly from the help) gets replaced with a "(URL address blocked: See forum rules)" Well, I don't see anything in the rules and I've read/searched through them now for 20 mins and am not having any luck. Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer I have a horizontel list as my menu with a 1px border to the right of each item as a seperator. Each item has 10px padding to the left and right. In all browsers it shows up as expected in the middle of the menu items but in Explorer the border is way closer to the right, almost pushed up against the item to the right. Any help please. Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <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"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? Is there a way to get IE to display an element's size properly when the element contains another larger element within it? OK, so I have two divs. Div1 has a height of 150px. Div2 contains an image that is 200px which I want to "overhang" below the first div's bottom border. So my code looks roughly like: Code:
<div id="one" style="height:150px; background-color: #EEEEEE;">
<div id="two" style="float:right; position:relative; top:115px; margin-right: 15px;>
<img src="someImage.gif"/>
</div>
</div>
Firefox displays this properly, maintaining Div1's height at 150 and pushing Div2 down so that it hang's over. IE allows Div2 to hang, but it resizes Div1 to be 200px. How can I stop IE from expanding the height to be larger than what I define it to be, even if a child element is larger? Hi, I have a page that works fine in opera, but for some reason screws up in IE. It's a basic container div, with 2 main divs inside this, one a column to the left, the other filling up the remaining space. In Opera, I insert this second div and all is fine. In IE, however, my once square container div is suddenly stretched several hundred pixels down. The easiest thing is to show you: CSS: Code:
/* CSS Document */
body
{
background-color:white;
font-size:x-small;
font-family:Verdana;
text-align:center;
}
#container{
margin-left:auto;
margin-right:auto;
width:700px;
height:550px;
background-color:#C7E8FD;
text-align:left;
}
#topbar
{
width:700px;
height:56px;
background-color:#3300CC;
}
#midbar
{
width:700px;
height:10px;
background-color:#96D6FF;
}
#welcometext
{
width:690px;
height:15px;
font-family:Verdana;
font-size:x-small;
color:#3300cc;
text-align:left;
padding:5px;
}
#leftcontainer
{
width:280px;
height:459px;
padding-top:10px;
}
#dropdown{
width:260px;
height:80px;
margin:3px;
background-image:url(images/dropdown.gif);
background-repeat:no-repeat;
margin-top:0px;
padding:7px;
}
#lefttop{
width:260px;
height:80px;
margin:3px;
padding-top:15px;
padding-left:15px;
background-image:url(images/leftopbg.gif);
background-repeat:no-repeat;
}
#leftmiddle{
width:260px;
height:80px;
margin:3px;
}
#leftinfo
{
width:260px;
height:125px;
margin:3px;
background-image:url(images/information.gif)
}
#imagecontainer
{
width:420px;
height:400px;
background-color:red;
left:270px;
top:-455px;
position:relative;
}
.menutext{
font-family:Verdana;
font-size:x-small;
color:#3300cc;
font-weight:bold;
padding:4px;
}
.searchbox{
border-color: #3300CC;
border-width: 1px;
border-style: solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
font-weight:bold;
color:#3300CC;
}
.searchbutton{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #3300CC;
background-color: #C7E8FD;
border-color: #3300CC;
border-width: 2px;
border-style:double;
}
.smalldesctext
{
font-family:Verdana;;
font-size:xx-small;
color:#3300CC;
line-height:10px;
font-weight:normal;
}
The page in question is here The red box (#imagecontainer) is the div that appears to be causing the problem, since when I take it out it's fine. I have tried using different DOCTYPES, and my CSS is valid according to W3C. Help, please! Thx in advance Hi, I am using the code below to try and create a resizable page. the problem is when the i cant get left nav to stretch the full height of the content div..... so when it is resized the footer etc all go over the top of the image...which looks wrong as iwant it all to stay in proportion any help would be much apreciated css body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { margin-top: 50px; margin-left: 50px; margin-right: 50px; margin-bottom: 50px; padding: 0px; background-color: orange; width: 80%; min-width: 241px; } #footer { padding: 0px; position: relative; padding: 0px; background-color: yellow; width: 100%; } #content { margin-left:182px; width:100% - #leftnav; background-color: red; align: right; min-width: 50px; } #leftnav { /*sets properties for the left nav bar*/ float:left; background-color : #66ccff; width: 180px; border-right:2px solid; border-color:#663300; height:100%; } html <div id="container"> container <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"></div> <div id="content">content content content content content content content content content content content content content content content content content content</div> <div id="footer">footer</div> </div> Is there any way to scale the size of a background image? I know there probably isn't but I thought I would ask. I would like the background image of a div to be a gradient that scales in proportion to the size of the div. I've thought about doing this using a expression type css rule where I have a backround DIV rather than it being the background of the div but older ie 5.0 doesnt seem to like those. Any thoughts? Let me know if you would like me to explain more.... Yes I know IE has a gradient filter but id rather not use Proprietary code Hello all, I'm a copywriter who's recently been forced into web design by my boss because of general tech savvy. I've replaced his old ugly website with a new, prettier one. I would post a url but it says I'm a new user and I can't - I don't know when that ban gets lifted. I did the layout with a table which I KNOW is incorrect and will make further development difficult, but my boss insisted and I don't feel too bad about it as this really isn't what I'm being paid for. (If he wants a correct, professionally designed website he can hire a professional web designer to do it correctly). However, there is one issue I'd like to fix, if I can. On the second, third and fourth pages (What Vehicles We Buy, FAQs, and Why Sell to Auto Buyer?) the table sizes incorrectly in IE 8 - but not in Firefox, Chrome or any phone I've been able to check it on. If you can open it in IE you should see what I'm talking about. Right off the bat, the navigation bar near the top is too low, and it gets worse the farther you get down the page. The images in the middle are way off. This is only the case on these three pages, all the site's other pages are fine. I'm at a loss on how to fix it. If I need to post the full code for you to see, I can do that but I don't want to clutter this post if it's not necessary. Here's the style codes for the background image and the table, respectively: #bg { vertical-align: top; width: 1601px; position: absolute; top: 0; left: 0; } #Table_01 { vertical-align: top; width: 1601px; position: absolute; top: 0; left: 0; } If anyone can see why I'm having a problem, I'd be extremely grateful. Thanks in advance. What is the most recommended way to set font size for my Web site? I would like my users to be able to resize the text on my pages via the View>Fonts feature in IE or the View>Text Size feature in Firefox. I'm using a stylesheet with the font set to "100%" and in my pages I have CSS styles such as style="font-size: 1em." Thing is, my XHTML 1.0 validates. It looks great in IE but comes out way too large in Firefox. What's going on and what to do about it? Hi I need something simple done. I need to decrease the size of a textbox (Image verification) on this page: http://quickonline.co.za/ Im not sure what to put in CSS , I tried this: Code:
input.chrono_verification {
width:50px;
}
nevermind Its a Id not a class OK, I am pulling my hair out on this one. Since new users are banned from posting url's in the body of a post you will have to get my domain out of my user profile and add "/wordpress" for the page and "/wordpress/wp-content/themes/Rancho%20Vista%20Theme/style.css" for the css). There are three areas that I am having a problem with. For reference, if you view this in Safari 3, you will get an idea of what it should look like. 1. In a Mozilla browser (Flock), the main menu is lower than it should be, and the size of the box in "Upcoming Events" is a couple pixels too small (you will see it cuts off the triangle at the bottom 2. In IE6 the "Last Blog Post" and "Upcoming Events" boxes' sizes are way too big. The white space between the logo and the green nav bar is too large. 3. In IE7 the "Last Blog Post" and "Upcoming Events" boxes' sizes are too small. Can somebody help please? CSS & HTML validate as well. I am relatively new to css, and I am having a hard time designing cross-browser code. There has to be an easier way. FMI (For My Information) - is there any information out there that shows a listing of what css is not recognized by each of the browsers? |
|||||||