|
CSS - Hr Margins Disappear And Footer Probleem
Hello,
please see this link: www. claeysconsult . be / misskado In the tab "Collectie" I need the hr (the little stripes underneath the list of brands) to give some margin, but it doesn't... Also, with a bigger screen, the footer doesn't properly align at the bottom of the page. How can i fix this? Thanks in advance for your help! Similar TutorialsHi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Hi I was wondering why only IE7 makes relatively positioned elements disappear into the right hand column on my site. It only happens when displayed in IE7, remaining browsers are ok (FF, Opera, even IE6). Being a newbie with IE7 bugs and workarounds, I ask you for advice. This is the page look at ghost images on RH column - IE7 only bug Please note the quircky behavior when you hover on any backgrounded area within the RH column: images within "LO MAS COMPRADO" and "RECIEN LLEGADOS" appear and disappear as lights turn on and off on a Christmas tree. All the areas that trigger this bug have in common to shift its background on hover. It's really funny, you hover on any area below those two blocks and all images dissapear, hover on any area above those blocks and images reappear, hover on areas within the blocks and image will appear only on the corresponding block. Is this an IE6 peekaboo variant? I've tried to isolate the problem, adding and deleting blocks inside the column, but it is a strange combination I can't realize. It happens just within the two blocks mentioned above, as you can see here. Images first appear ok, but they dissapear every time you hover over the "buttons" (wich are really block displayed <a>'s with shifting bg img. on hover), wich is almost the same that occurs in the complete Rh column version. Any thoughts? Thank you Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table cellpadding=0 cellspacing=0 border=0 style="margin:0;padding:0;"> <tr style="margin:0;padding:0;"> <td style="border:1px solid black;width:120px;height:90px;text-align:center;margin:0;padding:0;"> <img src="http://www.gamertagpics.com/filesave/k/Ku/s_Kurow_Shinobi.jpg" style="margin:0;padding:0;height:100px;"> </td> </tr> </table> </body> </html> I made it as simple as could be. 1 table, with 1 row, with 1 cloumn with 1 image. EVERYTHING has a margin of 0 and padding of 0. Why is there still a space below the image? Please tell me how to remove this space. All but the last image disappear in IE6 (works in FF and Safari). I searched the web for a bug fix but have not found anything that works. Any assistance would be greatly appreciated. Thanks in advance. Here is the live link: http://www.crossmediamgmt.com/HelpwithIE6bug.html Here is my code: Code:
<style>
#news{
float: left;
width: 179px;
height: 332px;
padding-top: 30px;
}
#news ul{
margin: 0;
list-style: none;
text-decoration: none;
}
#news a {
display: block;
text-decoration: none;
}
#news img{
border: none;
}
#news a#Mar08{
width: 179px;
height: 20px;
background: url(../imagesjp/March_2008.gif)0 0 no-repeat;
}
#news a#Mar08:hover{
background-position: 0 -20px;
}
#news a#Sep07{
width: 179px;
height: 20px;
background: url(../imagesjp/september_01.gif)0 0 no-repeat;
}
#news a#Sep07:hover{
background-position: 0 -20px;
}
#news a#Aug07{
width: 179px;
height: 20px;
background: url(../imagesjp/august_2007.gif)0 0 no-repeat;
}
#news a#Aug07:hover{
background-position: 0 -20px;
}
#news a#May07{
width: 179px;
height: 20px;
background: url(../imagesjp/may2007.gif)0 0 no-repeat;
}
#news a#May07:hover{
background-position: 0 -20px;
}
#news a#Apr07{
width: 179px;
height: 20px;
background: url(../imagesjp/april2007.gif)0 0 no-repeat;
}
#news a#Apr07:hover{
background-position: 0 -20px;
}
#news a#Feb07{
width: 179px;
height: 20px;
background: url(../imagesjp/february_01.gif)0 0 no-repeat;
}
#news a#Feb07:hover{
background-position: 0 -20px;
}
#news a#Nov06{
width: 179px;
height: 20px;
background: url(../imagesjp/november.gif)0 0 no-repeat;
}
#news a#Nov06:hover{
background-position: 0 -20px;
}
#news a#Aug06{
width: 179px;
height: 20px;
background: url(../imagesjp/august2006.gif)0 0 no-repeat;
}
#news a#Aug06:hover{
background-position: 0 -20px;
}
#news a#Jul06{
width: 179px;
height: 20px;
background: url(../imagesjp/july.gif)0 0 no-repeat;
}
#news a#Jul06:hover{
background-position: 0 -20px;
}
#news a#Jun06{
width: 179px;
height: 20px;
background: url(../imagesjp/june.gif)0 0 no-repeat;
}
#news a#Jun06:hover{
background-position: 0 -20px;
}
#news a#May06{
width: 179px;
height: 20px;
background: url(../imagesjp/may_2006.gif)0 0 no-repeat;
}
#news a#May06:hover{
background-position: 0 -20px;
}
#news a#Apr06{
width: 179px;
height: 20px;
background: url(../imagesjp/april2006_01.gif) 0 0 no-repeat;
}
#news a#Apr06:hover{
background-position: 0 -20px;
}
</style>
</head>
<body>
<div id="news">
<img src="../images/news_img.jpg" alt="News" width="179" height="62" />
<ul>
<li><a href="news_sealing_selling_cracks.html" id="Mar08"></a></li>
<li><a href="news_maximizing_every.html" id="Sep07"></a></li>
<li><a href="news_print_solution.html" id="Aug07"></a></li>
<li><a href="news_americanprinter.html" id="May07"></a></li>
<li><a href="news_printer&mediabuyer.html" id="Apr07"></a></li>
<li><a href="news_printingnews.html" id="Feb07"></a></li>
<li><a href="news_printing_impressions.html" id="Nov06"></a></li>
<li><a href="news_dallas_branchout.html" id="Aug06"></a></li>
<li><a href="news_dallas_growingprinter.html" id="Jul06"></a></li>
<li><a href="news_dallas_businessgernal.html" id="Jun06"></a></li>
<li><a href="news_media_wins.html" id="May06"></a></li>
<li><a href="news_visionaries.html" id="Apr06"></a></li>
</ul>
</div>
</body>
</html>
Hi, if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too). i don't know if its normal or not?? i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome. I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned. When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate. The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user). Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div. It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I picked up the unitpngfix.js that was released recently because it's smaller, less complicated, and fit my needs better than the Twin Helix fix. (Twin Helix released an updated Alpha version 2 days ago that supports background-repeat and background-position!) Anyway, when the unitpngfix.js is fired upon site load, most of my content disappears. The general layout remains basically intact, but everything inside does not show. The IE developer toolbar outlines the divs in the upper-left hand of the page. I was shooting back and forth a few emails with the creator of the script, and he said that it happens when the Javascript is fired. The script goes through and changes most position:static elements to position:relative. He was not sure why it was effecting my page that way, because he said that how elements display should not change based on position:relative or position:static (default). I'm working on getting a test site up shortly and will edit the post accordingly. But does this sound familiar to anyone? hi, i am setting up a webstore with php and css and all that. FF is just fine and i love it. IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears. please someone tell me that it is not just me going nuts here? if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ... uh well, here is the url: www.chocolateriewanders.com/store and please - no purchases (yet) .... the whole payment thing is a worry for itself Hi, i made a page with DIVs and floats and all that and everything is peachy. i got myself an ecommerce solution, re-designed the interior to be tableless and now have a problem with IE that i cannot seem to get rid off. live example: www. chocolateriewanders.com/shop - the 3 floated images leave the div in IE (do not wrap) [thats the smaller problem] - if you click on 'Gift Boxes', then the content is moved down quite a bit opposed to the looks in Firefox, were its all aligned correctly. i tried to apply the holly hack - but i am not very comfortable with it. right now the 'shop' site does not validate and i have no idea why either (html validation) If someone could help me out, that would be great (and yeah i want to succeed in validation too! but this shop is pretty crazy put together and i have no clue about php and whatnot it utilizes .... btw, most pages are put together with php from a database and TPL files, which i can edit) according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8? My html: Code: <!-- show_menu2 -->
<ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">
<li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
<li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
<ul class="ullev3">
<li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
<li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>
<li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
<li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
</ul>
</li>
<li><a href="#" class=" navlev2" title="AMASP">AMASP</a> </li>
<li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>
<li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
</ul>
</div>
<!-- end of subnavigation -->
My CSS: Code: #submenu
{
padding: 0;
/* [disabled]width: 247px; */
/* [disabled]position: relative;
*/
/* [disabled]left: -15px; */
}
#submenu a
{
text-decoration :none;
color :#5b9acf;
padding-left :12px;
display :block;
background-image: url(../images/bullets_micro/square3.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu a:hover
{
color :#003366;
background-image: url(../images/bullets_micro/square1.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
border: none;
}
#submenu a.menu-current
{
font-weight :bold;
color :#003366;
background-image: url(../images/bullets_micro/asst3.gif);
background-repeat: no-repeat;
background-position: 4px 50%;
}
#submenu ul
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
/* [disabled]margin-left: -25px;
*/
/* [disabled]position: relative;
*/
/* [disabled]left: -10px;
*/
}
#submenu ul li
{
padding :5px 0;
/* [disabled]line-height :1.4em; */
font-size :12px;
list-style-type :none;
border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
padding: 0px 10px;
}
#submenu ul li li
{
border-bottom :none;
padding-bottom :0px;
font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
color :#003366;
background-image: url(../images/bullets_micro/diamond4.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu ul li li a:hover
{
background-image: url(../images/bullets_micro/diamond.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
color: #6DB9FA;
}
/* ====================== */
My test page: (pardon the blue background I just added this to see the container.) http://new.ssmarts.org/page.html Thanks so much. Hello. I'll preface this by saying that it's probably a common problem with a simple solution, but I've searched all over the net for a solution and come up empty. It's very possible that I'm using the wrong search terms, however. Anyway, on to the issue I'm having. I recently rebuilt a page using CSS with divs -- prior to that it had been using several nested tables and the code was getting pretty unwieldy -- and it looks great in most of the latest browsers. Except, of course, IE. The way the page is set up, I have two container divs floated left, each one using 48% of the available width, with a 1% margin on each side. It looks perfect in every browser except for IE. In IE it seems that the only style definition that it cares to acknowledge is the float left, so both container divs get forced together on the left side with no space in between. It's not unreadable, but it's not what i want either. Here's the style definition: Code: .newsTypeSection{
width:48%;
float:left;
margin-right:1%;
margin-left:1%;
display: inline;
}
the display:inline; was something i added later as it seemed to be a proposed fix from another site. It didn't make a difference that I could see, so I just left it. Here's an image that shows the difference. The top example is what it should look like. It looks perfect in every browser but IE. URL The bottom is what shows up in IE8, and probably other version of IE as well. Can anyone help me with this? It's beyond frustrating. Please let me know if you need more information. I can't link to the page because it's not public at the moment. I am having a problem with negative margins in IE7. On my website: commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! Hey there. A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here. As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol. Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side. Code: <style>
{ Music Player Properties }
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000; background-attachment:scroll; background-position:top center; background-repeat:no-repeat; background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg);
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;}
.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}
.menu{
width: 959px; height: 136px; position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.header {
width: 959px; height: 422px; position: absolute; top: 169px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.memberstop {
width: 959px; height: 403px; position: absolute; top: 727px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.thealbum{
width: 422px; height: auto; position: absolute; top: 1130px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.musicbg{
width: 541px; height: auto; position: absolute; top: 1130px; z-index: 0; overflow: visible; margin-left: -62px; left: 50%;}
.shows{
width: 959px; height: auto; position: absolute; top: 1513px; z-index: 0; overflow: visible; margin-left: -480px; left: 50%;}
.reverbshows{
width: 959px; height: auto; position: absolute; top: 1550px; z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
.featvideo{
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important; height:auto !important; position:static !important; background:none !important; }
.friendsComments div { overflow:visible !important; height:auto !important; position:static !important; width:auto !important; background:none !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important;
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px;
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; }
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
width: 110px !important; overflow: hidden; letter-spacing: 0px; font-size: 10px !important; line-height: 12px; display: block; color:50433d!important;
margin: 0 !important; padding: 0 !important; text-align: center !important; margin-left: 1px !important;}
.friendSpace {
position: absolute !important; z-index: 4 !important; width: 800px !important; margin-left: -320px; _margin-left: -400px; top: 0px !important; margin-top: 1860px !important;
}
.friendsComments {
position: absolute !important; z-index: 6 !important; margin-left: -35px; _ margin-left: -400px; width: 833px !important; top: 0px !important; margin-top: 2755px !important;
}
.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;}
.friendsComments table {width: 800px; align: justify; position:relative; left:0px; }
.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>
Hi Guys, I have a question about me not understanding how margins work... I am quite perplexed...I am trying to remove the white space between borders of table cells. I am using: Code: td { margin: 0; }
But there is still white space between the cells...how do I make no space between the cells? Code is located he http://www.taipeitripper.com/senshin_center/training_schedule.html Thank you, Evan Jerkunica I've got two child divs nested in a parent div. They are shown below. The problem I am having is that in IE 5.x for Mac, the top margins do not work, while the left margins are applied properly. The following script works just fine in: safari, mozilla, firefox, opera, netscape, etc. It is only in IE for mac that the top margin is not applied and the two children are positioned improperly. If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated! #parent { width: 700px; height: 66px; } #child1 { width: 288px; height: 56px; margin: 8px 0 0 10px; background-image: url(whatever); background-repeat: no-repeat; float: left; } #child2 { width: 115px; height: 40px; margin: 14px 0 0 165px; background-image: url(whatever); background-repeat: no-repeat; float: left; } |
|||||||