|
CSS - Table Sizing Issue (ie 8)
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. Similar TutorialsIs 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 everyone, I've been fixing my blog's CSS issues, and managed to figure out everything expect for 1 thing: If you re-size the browser's window or use CTRL+mouse scroll to zoom in/out, you will notice that the nav menu doesn't follow the rest of the layout, but gets positioned on its own somehow. URL : howtohollywoodvideo dot com Here's my CSS for the layout. Header Logo Nav Menu #header { background: url(images/header-bg.jpg) bottom left repeat-x; width: 100%; float: left; } #header-left { /* For the Logo */ width: 490px; float: left; padding: 5px 0 5px 0; #navigation { width: 100%; float: left; color: #fff font-color: #fff; font-size: 18px; font-family: Verdana; } What is the solution for my problem? I tried position: properties, but nothing could make the menu get re-sized the same way as the rest of the layout. 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> Please see here http://www.challengeyourdiet.com/te...etail.php?id=13 If you look at the table, you will see one of the borders toward the bottom of it slightly breaking. I cannot figure out for nothing what is causing this. Any ideas? Also, a different issue, if you shrink your browser and then scroll to the right you will see the text and things out of place. Is this a min-width issue? Thanks! I use Code: .list_table {
border: 1px solid #BDC2C6;
border-collapse:collapse;
}
.list_table tr{
border: 1px solid #BDC2C6;
border-collapse:collapse;
}
but TR borders registers only in FF, what's with the IE? 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? 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 This is not too important but my site (http://www.o0matte0o.myby.co.uk/) Sorry nearly fixed it sorry just gotta work out how to get the background to cover the text aswell 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? 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 -->
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 Hello Dev Shed, I am having a problem aligning my tables inside thier respective column div's to the center. Here is the css sheet in question. Code: body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background:#FFF;
margin:0;
padding:0;
}
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
#container {
margin-top:0px;
padding-top:0px;
width:1024px;
margin-left:auto;
margin-right:auto;
background:#FFF;
}
#header {
width:1024px;
height:100px;
background:url(../images/headerbg.jpg);
text-align:right;
color:#bce9c3;
font-weight:bold;
}
#header h1 {
color:#FFF;
margin:0;
padding:0;
font-size:xx-large;
padding-top:10px;
padding-right:5px;
}
#header p {
margin:0;
padding:0;
padding-right:5px;
}
#content {
width:1024px;
background:#a3e1ad;
}
#leftcol {
padding-top:10px;
float:left;
width:512px;
background-color:#a3e1ad;
text-align:center;
}
#rightcol {
padding-top:10px;
float:left;
width:512px;
background-color:#a3e1ad;
text-align:center;
}
#content table {
border-width:4px;
border-spacing:0px;
border-style:solid;
border-color:#168cf7;
border-collapse:collapse;
}
#content td.title {
background-color:#FFF;
}
#content td.title p {
color:#168cf7;
font-weight:Bold;
text-align:Center;
}
Even though both leftcol and rightcol have text-align set to center, they're still both aligning to the left. Any help would greatly be apprieciated. Thanks in advance. http://www.gaminghybrid.com/cms_design/ I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center) Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE. Any help is appreciate Help I just can't get this thing to size. I've tried all sort of stuff This is so simple I must be missing something obvious. Here is what I want: on the left the rss feed link. to it's right the legend link with a button background behind it. I've gotten stuff like this to work before so I must be missing something. Here is what it does: The RSS feed link is fine, but the problem is the bg graphic is truncating and I want all of it to show. It also cuts it off in the vertical direction. Here is the current code (may change again by the time you look at it though!) Code: <a href="rss/calrecent.rss" ><img src="images/feed-icon-14x14.png" height="14" width="14" alt="rssfeed" border="0" /> Calendar FEED </a>
<span id="lar1" style="background: url(images/leg-button.gif) top left no-repeat; height: 31px; width: 183px; " ><a href="#" onclick="return dynpop('genrelegend',600,700);" style="text-align: center;"> Legend</a> </span>
I tried putting the background on the <a> element and setting its size with a style. and making it a#lar1 but that didn't work. So my latest try would be to size a span element. Here is the style of lar1 span#lar1 { height: 31px; width:183px; } Here it is in situ http://demo.tixrus.us/calendar.php Thanks I know I've made this kind of thing work before so what stupid thing am I missing in my blindness and frustration?? Thanks, and the one who answers will probably be Kravvitz but anybody can take a swing at it. GO SOX! Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding: Code: font-size:8pt; but that didn't work. Hi all, I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue. (I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.) When my site is viewed with text set to "Medium," everything appears fine: http://www.flickr.com/photos/251449...in/photostream/ When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit: http://www.flickr.com/photos/251449...in/photostream/ Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again: http://www.flickr.com/photos/25144998@N00/4997174984/ I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas? CSS Code: body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}
.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}
.content
{
text-align: right;
font-size: .8em;
}
.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}
#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}
#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}
#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}
#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}
#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}
#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}
#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}
#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}
#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}
#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}
#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}
#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}
#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}
HTML Code: <!DOCTYPE html> <HTML> <HEAD> <META CHARSET="UTF-8"> <title>layout three</title> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="mother"> <div id="UpperLeftWrapper"> <div id="UpperLeft" class="header"> </div> </div> <div id="UpperRightWrapper"> <div id="UpperRight" class="header"> <p>demonstration<br>layout<br>number two</p> </div> </div> <div id="MiddleLeftWrapper"> <div id="MiddleLeft"> <div class="clickables"> <p>additional reading</p> </div> </div> </div> <div id="MiddleRightWrapper"> <div id="MiddleRight"> <div class="navbutton"> <p>tab one</p> </div> <div class="navbutton"> <p>tab two</p> </div> <div class="navbutton"> <p>tab three</p> </div> <div class="navbutton"> <p>tab four</p> </div> <div class="navbutton"> <p>tab five</p> </div> </div> </div> <div id="LowerLeftWrapper"> <div id="LowerLeft" class="clickables"> <p> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </p> </div> </div> <div id="LowerRightWrapper"> <div id="LowerRight" class="content"> <p> Body content here... </p> </div> </div> </div> </BODY> </HTML> Thanks in advance for any advice! Hi folks, I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser. Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution. I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry. Cheers, Pete Hi, I'm having a problem and was wondering if CSS can help me do what I need to. I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it. An example of this would be: Name: ____________________ Address: __________________ That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name". I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label. Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name. |
|||||||