|
CSS - Td Padding On Img Shouldn't Exist
I have been having a heck of a time with css and ie.
My current problems relate to ie for Mac. 1. If I have a div I can't give a % for vertical-align, the table cell that the div is contained in is effected by expanding vertically way beyond acceptable. I removed the % and used a text value and have to deal with the non-alignment. 2. If I have a div float right and text that is align right, the div is shoved way to the right off the screen. I have to scroll to see the div, and the div is the only thing over there. I removed the text align right and the div is in the right spot. * The un-workedaround conundrum ************** 3. I have a TD with padding like this 6px 6px 6px 100px and an img float right, or in the html align="right". The img has a margin or padding on the right of what looks like 100px instead of the 6px. The text in the TD is right and the padding on the left of the img is right. It works fine on all other browsers except ie 5 on Mac. If anyone has an answer, or a workaround, for for this that would be awesome! ****************************** Similar TutorialsBasically on this page http://forum.prxa.info/profile.php?info=1&pageno=2 At the bottom the pagination boxes seem to have extra borders around them? Should look more like http://forum.prxa.info/popular.php with seperate boxes! Hi, I'm having a bit of a weird problem with a div layer being transparent when it shouldn't be in IE - works exactly as expected in FireFox. I've spent a fruitless day yesterday tring to figure out what I was doing wrong but no joy I've also searched this css forum but haven't found anything that quite answers my problem. The basic problem is that I have a web page with three columns of text ... test page ... in column one I have a list, when you mouse-over on an item in the list a hidden div is shown with associated text. The strange thing is that when I mouse-over the item, the hidden div is shown, but where the div crosses fromcolumn one into column two the background becomes transparent and therefore additionally shows the text underneath (which naturally I don't want). I've ensured that the background color is set to white (which fixed the problem in FF) but doesn't seem to work for IE. Again this odd because the part of the div which is over column one isn't transparent so why it becomes over column two is a little odd. EDIT : Just a little note in addition to above - obviously I have also set the z-index values so that the hidden div has the highest value of all div z-index values to ensure that it appears on top. Any help would be greatly appreciated. Hey everyone. Can anyone tell me why the blue container backgrounds on my development site... http://cmsbase.stealthwd.ca are having a gradient in ie? I'm talking about the news, twitter, main copy etc containers. It's supposed to just repeat the image, but its making the image a gradient from left to right. Other browsers are fine. Please and thanks! I have just a few more CSS bugs to iron out and I can't seem to figure this one out. Here's a link: http://www.plml.org/multitool/index.php In IE8/Firefox it works just as it should: the #solution_area div (contains the multiplication problems) doesn't stretch to its max width. In IE7 the #solution_area div stretches. I've tried taking out all of the contents of the .tab_content divs (just inside the #solution_area div) except for some gibberish text and it works fine. As soon as I put a single thing in, it stretches. What's going on? 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... i need to make a table to wrap my content, but i would like to keep the top and side borders so that the table will only expand downwards if there is to much to hold in the windows.... but regular tables will loose the top border, and thats not to my liking ;( is there a way to fix a div tag or something ? thanks... F/ I seem to recall seeing this trick, but now when I am looking around for examples I can't find any. What I want is a footer div (with the standard footer links, and email address) which will always be docked on the bottom of the viewing area of a browser. So if I scroll up and down the webpage / or resize the browser window, the footer will always appear, visible at the bottom of the window. Any ideas, examples? Ed This could be a tough one... I have trawled the search engines for a solution, but I don't think I'll find one. What I want to know is is it possible to create a dropdown navigation menu without using Javascript? I've seen an example of how it can be done with CSS, but the author said that it will not validate. Thanks in advance Andy I'm looking for a solution to add rounded corners to several DIVs on my site but all of the solutions I have come across use a ridiculous amount of extra markup. Rounded corners are presentation and should obviously not require any code changes within the XHTML document but does a pure CSS solution exist? What do you guys use? On a CSS tutorial page, I saw an element for an "include-source" command that you can put into your style sheet. It's something like: include-source: url("test.html"); My understanding from that site was that you can put this into your style sheet. Therefore, you can have another page's contents (in my case, only text) display. In other words, whatever I had in the test.html file would display in the <div> tag on the index page where I had called it. It's not working, so what am I missing? I'm using PHP; would that be easier? What I'm trying to do is have a standard layout for all of my pages using css. Instead of having to go into each page and edit it, I'd rather have it in files that I can get into and not search through all of the PHP, HTML, CSS code. Any ideas or suggestions? Thanks. Tim Hi there, I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div. This is the code I am using: PHP Code: #related_links{ width: 165px; height: 237px; background-image: url('images/related_bg.jpg'); background-repeat: no-repeat; float:right; padding-right: 10px; } #related_inside{ padding: 10px; } #content{ padding-right: 10px; } #content_inside{ padding: 10px; } PHP Code: <div id="related_links"><div id="related_inside">right hand text</div></div> <div id="content"> <div id="content_inside" >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div> I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu. I have a ul that contains my menu list. The CSS and xhtml are as follows: Code: /* Menu */
li {
border: 1px solid #000000;
border-bottom: 0px none;
display: inline;
line-height: 14px;
margin: 0px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
}
ul#menu {
background-image: url(img/menu.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
background-position: left bottom;
vertical-align: text-bottom;
}
/* End Menu */
<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>
(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.) the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work. to see what i'm talking about if my words are il formed (as they often are) click here. to view the CSS click here. Around this dropdown image? http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm I have padding and margins all set to 0... Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward. ??? Any help will be greatly appriciated. Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told: "Basically you want to add more white space between the vertical line and the text" How would I go about doing this? The site Im talking about is: www.ohiocichlids.com Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie I'm having some troubles getting my div to appear correctly. WHat I want is for the div to be completely contained by a FLASH movie with no whitespace. In Firefox I'm getting an approximately 5px tall white bar at the top. TWH is the url, the flash movie only appears on the main page. My container div uses a background image with a greenish colored 200px left edge, and then a white edge to fill the rest. I know this is what's coming through, but what baffles me is that even when specifying a background color for my div it's not coming through. Here is some of the code: CSS: Code:
#container {
width: 760px;
height: auto;
margin: 0 auto;
text-align: center;
overflow: auto;
background: url('../images/style/container_back.jpg') repeat-y;
border-bottom: 20px solid #6e868f;
}
#lcol {
width: 200px;
height: 380px;
float: left;
text-align: left;
}
#nav {
height: auto;
background-color: #000000;
width: 100%;
text-align: center;
}
#nav ul
{
list-style: none;
padding: 20px 0px;
margin: 0px;
}
#nav ul li
{
padding: 7px;
}
#info {
height: auto;
width: 190px;
text-align: center;
padding: 5px;
font-size: 11px;
}
#flashcontent
{
width: 560px;
height: 380px;
padding: 0;
margin: 0;
float: right;
}
HTML -- I've taken the content out so that the structure is more clear. Code:
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="quote"></div>
</div>
<div id="lcol">
<div id="nav"></div>
<div id="info"></div>
</div><!--lcol-->
<div id="flashcontent">
FLASH player is required to view portions of this site.<br /><br />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">
<img src="images/logos/get_flash_player.gif" alt="FLASH player" height="31" width="88" /></a>
</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "gallery", "560", "380", "6", "#6e868f");
so.write("flashcontent");
</script>
</div><!-- end container --><br />
|
|||||||