|
CSS - Padding A Border 1 - 2 Pixels
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??
Similar TutorialsIs 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'm having a real hard time trying to figure out how to fix this css issue. I'm trying to fix what's in the 3rd table content that is the compose new pm message form so that it doesn't have any space between the form and the outer content just like it is on the template that says Form with Alternative Style in the form heading. I can't fix the content class rule because that completely messes up the rest of the page and you can see that if you go back to one of the other two tabs. Template: http://www.kansasoutlawwrestling.com/peach/forms.html My Page JSfiddle: http://jsfiddle.net/MtzqR/ First off, I'm a new member. I'd like to thank everyone for such a great board. My name is Mike and I'll be a very active user in this community as I enter the world of web design. I have a page with an embedded flash object. I created a CSS Border around the object, and would like to add padding to it so that text can wrap around it. I understand that when adding padding to an object, it actually pushes the border out. I want the padding to reflect outside the border and not inside. All of my CSS has to be inline (the company's site does not allow workers to access template files via FTP). Here's what isn't working: <div style="padding-left:10px;padding-bottom:10px;"> <div style="border: 5px solid rgb(198, 175, 144); float: right;position:relative;right:12px;bottom:9px;"> *flash code* </div> </div> As you can see, I tried adding padding-left and padding-bottom outside the border but the text is still going underneath the object. Is there a better solution to this (using inline css)? Thanks to all. I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better: http://www.midwivesonline.com/test.html at least it will do in everything but IE6 on windows where it stretches out too far to the right. The problem lies in the css: http://www.midwivesonline.com/styles/test.css In particular: .currentpagep { padding-right: 155px; border-right: 5px solid #85306B; } If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is... I'd really appreciate any help on this, Cheers, Tim Hi, I have a problem with the css for the following page: http://www.designdictator.com/ For the img in the log i do use the following css: #content img { display : block; border : 1px solid #999; padding : 4px; margin : 20px 0; } but in IE6 the padding between the border and the img doesn't display. Firefox does all right. What's wrong? thanx jarra I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px: Code:
#navlist2 a
{
width: 168px;
/* extend the sensible area to the maximum with IE5 */
display: block;
text-align: left;
text-decoration: none;
color: #fff;
margin-top:5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 12px;
font-weight: bold;
}
#navlist2 a:visited {
}
#navlist2 a:hover {
width: 163px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
padding-left: 5px;
}
It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it? Hi guys, Ive been playing with this little bit of CSS for a while now and its' definitely getting the better of me. I have been using the demo on www.w3schools.com to create a horizontal menu. That has worked fine. I thought I could use a similar principle to create a horizontal menu. The whole idea is to create a CSS template, and then go through putting the ASP, etc in. I want to have a "leftpanel" on my site which will contain the navigation menu (that I am trying to create) and later make space for featured listings/whatever. Anyway, this is what I have: Code:
ul.ver
{
width: 125px;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid black;
list-style-type: none;
float: left;
}
a.ver
{
float: left;
width: 125px;
text-decoration:none;
color: black;
padding: 0.2em 0.6em;
border: 1px solid black;
background-color: #A2B5CD;
}
div.leftpanel
{
background-color: #CAE1FF;
width: 125px;
float: left;
margin: 0px;
padding: 0px;
}
And the HTML is: Code: <div class="leftpanel"> <ul class="ver"> <li><a class="ver" href="#">MenuA</a></li> <li><a class="ver" href="#">MenuB</a></li> </ul> </div> The problem that I have is that no matter what the width of the <a> tags are, and what the width of the "leftpanel" is, there is always 20-ish pixel width strip of the "leftpanel" showing through, even though they are the same width, with no padding, no margins, no nothing! If I play with the padding on the <a> it seems to have no effect! Thanks to anyone who can offer me some help! Porky. Hello. Look at the differences between the borders around photos he http://www.fusionfox.com/2006/02/tinker_toys.html In Firefox and in IE. My CSS looks like this: .imageleft { float:left; margin:10px 10px 10px 0; background:#FFFFFF; padding:3px; border:1px dotted #999999; } Why does the image border disappear in IE? This is killing me. Any help would be greatly appreciated. Thanks! Hi, I just was wondering if there is a way to load an image as background of a div with a 1px padding from the border of that same div. At the moment I have to create two divs. The first div has the border and a padding of 1px and the second div loads the image as background! However I was wondering whether I could do all this in one. Regards, Sim085 Code on the page: Code: <body> <div class="wrapper_page"> <div class="wrapper_widebackground"> <div class="wrapper_body"> <div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div> <div class="wrapper_nav_top"><!-- navbar goes here --></div> <div class="wrapper_main"> <div class="wrapper_main_insidebackground_blue"> <div class="wrapper_main_insidebackground_white"> <div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div> <div class="wrapper_main_content"> <div class="wrapper_main_sword"> <!-- Content here --> </div> </div> </div> </div> </div> </div> </div> </div> </body> Stylesheet: Code:
.wrapper_page {
text-align: center;
width: 100%;
border: 0px solid #FFFF00;
}
.wrapper_widebackground {
background-image: url(../Cloth.png);
width: 1350px;
background-repeat: no-repeat;
margin: auto;
clear: both;
border: 0px solid #FF0000;
}
.wrapper_body {
text-align: left;
margin: auto;
clear: both;
width: 1000px;
border: 0px solid #FF00FF;
padding: 0px;
}
.wrapper_head {
height: 182px;
width: 1000px;
border: 0px solid #33FF00;
margin: 0px;
padding: 0px;
}
.wrapper_nav_top {
height: 24px;
width: 1000px;
border: 0px solid #FFFF00;
margin: 0px;
padding: 0px;
}
.wrapper_main {
background-color: #000000;
background-image: url(../background.jpg);
margin: auto;
padding: 0px;
background-position: top;
background-repeat: repeat;
clear: both;
border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
background-repeat: no-repeat;
background-image: url(..Blue.jpg);
background-position: top;
background-color: #000000;
}
.wrapper_main_insidebackground_white {
background-repeat: repeat-y;
background-image: url(..White.png);
background-position: top;
}
.wrapper_main_top {
border: 0px solid #00FF00;
height: 35px;
width: 1000px;
margin: 0px;
padding: 0px;
clear: both;
}
.wrapper_main_sword {
background-image: url(../Sword.png);
background-repeat: no-repeat;
background-position: right top;
vertical-align: top;
padding: 0px;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #FF33CC;
}
.wrapper_main_content {
border: 0px solid #FF9900;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 90px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a bottom margin whether I put a bottom margin of 0 there or not. (Currently, it is set to auto.) I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work. Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border. (I'd give you the URL, but the forums wouldn't allow it.) Why is this happening and how do I remedy it? 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? 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 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. 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. 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, 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 |
|||||||