|
CSS - 200 Extra Pixels
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 Similar TutorialsHi 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> 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? 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. 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! 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 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. 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 I've had a look at the CSS for this website onerailway .com but cannot seem to find out how the width of the entire site is defined. If you are using any screen res upto 1024x768 its 100% of the browser (assuming its not windowed) but then go over 1024x768 and it limits its self to around 1000 px wide. This is the sheet it appears to be using Many thanks if anyone can point me in the correct way for finding out how to do this Hello, is it possible to start a border-left css 1 or 2 pixels from the left of the element instead of it going to the far left of the element?? 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: Not sure if this is really a CSS problem but... In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar). Anyone know what might cause this? Thanks, Hi there developers! im new here and desperately trying to be resonable at developing myself! i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red! Code: URL can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers. html code: <div id="columnSubTop"> <div class="submenudropdown"> <div class="floatLeft width25 padL300 padTOP25"> <form action="search_for_vouchers_by_town" method="post" name="search" id="search"> <select name="fldCountyID"> <option value="">Please Select</option> <% While (NOT CountyList.EOF) %> <option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option> <% CountyList.MoveNext() Wend If (CountyList.CursorType > 0) Then CountyList.MoveFirst Else CountyList.Requery End If %></select> </div> <div class="floatRight width25 padR10 padTOP25"> <select name="fldTownID"> <% While (NOT TownList.EOF) %> <option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option> <% TownList.MoveNext() Wend If (TownList.CursorType > 0) Then TownList.MoveFirst Else TownList.Requery End If %></select> </div> </div> <div class="submenubutton"> <input type="image" src="images/search_button.gif" alt="Submit button" /> </form> </div> </div> CSS code: #columnSubTop { height: 85px; width:940px; margin: 0 auto; float:left; background-image:url(../images/css/subheader.gif); background-position: top left; background-repeat: no-repeat; clear:none; } .submenudropdown{ float:left; width:750px; } .submenubutton{ float:right; margin:0 auto; padding:24px 62px 0 0; } he http://www.cycloid.f9.co.uk/basic.gif is my problem he http://www.cycloid.f9.co.uk/basic.htm http://www.cycloid.f9.co.uk/basic.css is the htm/css with the rest of the garbage (forms etc) taken out the browsers shown are IE6,FF1,NS7 and opera (though i cant remember the version, all have been updated in the past month though as this is a new computer!) i know this is nit picking but the heading sizes are different accross the browsers, and some appear to have padding too. the rest of my elements seem to size/margin/stack the same but not the H tags. anyone got any suggestions how to get them to listen to my rules! or could it be a case of rounding errors in each browser's calculations once the font sizes get particularly large? or do i have to <div class='h1'>heading</div> instead!? anyway, i personally am not bothered about things being pixel perfect alas it's not a perfect world and simply getting things to line up how im asked to at work and getting paid at the end of the month is more important to me than doing it all in em's! cyc 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. Hey, I have two main columns of content. I want them both to be relative to the center. So the div on the left would be centerd minus 410 pixels and the right would be centerd plus 10 pixels. margin-left: auto; margin-right: auto; Centers it, but there is no way to add or subtract pixels to that amount. Any ideas? Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems. However todays problem I thought I'd ask about. There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either. Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I am developing a website using CSS. I have created a navigation bar and associated styles. In each of the 4 menu drop downs, the third item has an extra border that stretches beyond the width and is in about the center of the item. I have reviewed, tried this, and tried that but cannot find out why the extra border occurs. If someone could help, I would appreciate the help a great deal. You can find the developing website at tamp.trustedtechpro.com and the css at tamp.trustedtechpro.com/styles/ff3.tamp.css Thanks. |
|||||||