|
CSS - Margin Assistance.
Hey everyone.
Well I am making a forum. And I need to use a margin-right for the main content(because I know of no other way to do it). They problem is, FireFox doesnt respond to the margin-right. Here is my (troubled) CSS. css Code: Original - css Code #main-content{ margin-left: 10px; width: 100%; }
#main-content{
And my XHTML. Code: <div id="main-content">Blahblahblah</div><!--Fairly simple :D--> I am using XHTML 1.0 Transitional. Similar TutorialsPlease look at this layout Layout Example In IE7 there is a gap between the footer and upper divs that I am not sure what is causing. The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated. Tom I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas Ive tried to make the text float next to the image but when i try the text just sits below the div line under the image to the right. here is the URL: http://www.nevertap.com/s_media.php here is the markup: Code: <div id="center_top_content_header"> <h3>Event DVDs</h3> <div id="center_top_content"> <a href="http://www.nevertap.com/s_media_01.php"><img src="/i/cover_thmb.jpg" alt="Nevertap: Season 1" /></a> <div id="imagetext"> <p><span class="plusone bold">Nevertap Season 1 DVD, 5 hours of premium submission grappling! 19.99 Plus S&H</span></p> </div> <!-- END imagetext --> </div> <!-- END center_top_content --> </div> <!-- END center_top_content_header --> And here is the relavent CSS: Code:
div#center_window {
/* margin-top: 0px;*/
margin-left: 215px;
margin-right: 250px;
padding: 5px;
height: 100%;
/* border-left: 1px solid black; */
/* border-right: 1px solid black; */
/*border: 1px solid black; */
}
div#center_top_content_header {
width: auto;
margin: auto;
border: 1px solid black;
}
div#center_top_content {
padding: 0 10px 10px 10px;
width: auto;
margin: auto;
/*border: 1px solid black; */
}
div#imagetext {
float: right;
width: auto;
margin: auto;
padding: 0;
display: inline;
border: 1px solid black;
}
Hello! I am currently fixing some issues with the BuufDesigns.com layout. But I am in need of assistance of some serious bugs I cannot fix in Internet Explorer and Firefox. Ironically, this website is compatible with Safari and Opera. This is a voluntary job, but you will be credited on the credit page. Not only that, but if anyone else knows how to intergrate ZenPhoto to my gallery, please PM me. Mind you, the Buufgallery and the ZenPhoto gallery default theme have very similar structure and attributes. Pretty much copying and pasting the php codes. But I can't seem to get that to function properly, hence needing a volunteer to help me on that. If you want this website released as soon as possible, someone please help me. I know there are some talented CSS designers here. But I can't seem to find a volunteer. Here are some teaser screenshots, if you want to help me with this little bug squashing project, you can see the whole development. URL Thanks! Please look at this page - www.pacunionsonoma.com The issue I am trying to resolve is the positioning of the two links that read "Find a Realtor & FREE Property Evaluation". On IE7 I I have them where I want them. On FF they are too low. I outlined all relatively positioned elements and it seems in FF those links are sitting on teh very bottom of the container div while in IE they are slighly above the bottom of the containing div. ANy help? Thanks. Hi, I am currently trying to postion an SWF menu on the top right corner of a DIV element, I am just starting with CSS and my brain has blanked out. I would greatly appreciate some HELP. Here is the link on the web= (ok I dont have permission to position a URL, please advise guys.) CSS body { background-color: #efefbe; } div#container { margin: 50px auto 0px auto; width: 1050px; height: 525px; } div#left { width: 525px; height: 525px; float: left; margin: 0px; } div#menu { width: 200px; height: 230px; position: absolute; top: 0; bottom: 0; left: 0; } div.content { width: 525px; height: 525px; background: white; float: left; margin: 0px; } p { font: 11px sans-serif; color: #666666; padding: 25px; } p#auto { overflow: auto; } Please look at this page - http://www.tmhdesign2.com See the nav bar with the green background and white font? I want that background to have an opacity of say 70% but when I do that the font also gets that opacity which is what I don't want. Hi, I am having some major problems making all the <div> tags place the content in the correct places. The logo (yes its poort quality on purpose, its just for testing ) needs to be centered and above the left and right vertical menus. The block of "Text" needs to be below the logo but contained between the two vertical menus. and the footer needs to be in line with the text but move up and down the page depending how much text is present. The site is: http://www.explosiveracing.net/test/header.html Could anyone be of assistance? Thanks Please visit this page - http://www.brooksidetransmission.com Put your mouse over the "Services" link to reveal a sub menu. In FF it works fine in that you can access each of the links in the sub menu. In IE7 though when you move the mouse around the sub menu links the who sub menu disappears. Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners. Somewhere in my combining the two messed up the :hover for IE7 Any help would be appreciated. Tom Website: www.devthor.net/sara/index.php CSS: www.devthor.net/sara/css/fineart.css Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better). So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space. So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible. Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue. I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated. Thanks in advance, Devthor P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful. Please look at this layout as provided by my graphic designer: http://hometown.tmhdesign.com/default.jpg Now look at my attempt to achieve the same http://hometown.tmhdesign.com I am a bit challenged at the right column and how to lay it out. She put a fixed height gradient background in the right div and then placed yet another div on top of that one. THe issue as you can see is if the content on the left exceeds the content on the right the design breaks up (so to speak). I'm really curious to get some feedback from the experts... I am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated. 1) . The line at the top of the screen and the tabs do not line up properly. The line transects the buttons. standardizedsupplements{dot}com 2) Image and Text are not aligned on same line: standardizedsupplements.com/tremorsure.html standardizedsupplements.com/purchase_tremorsure.html 3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists. standardizedsupplements.com/contact-us.html 4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits. standardizedsupplements.com/faq.html Hi, Im creating a list that shows a photo and personal data of people. It's he http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros username: fer password: m When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn't any space. Is that the bug of the "doubled margin" of IE6? Regards Javi I must be really dumb or blind here... For some reason i cant seem to get div.show_listing to actually move up. Sorry for my ignorance here in CSS, but i learn as i go. css Code: Original - css Code .container { display: block; margin-top: -32px; margin-left: 3px; width: 780px; overflow: hidden; border: 1px solid #cccccc; } /* Start Mac IE5 filter \*/ div.left_menu, div.show_listing { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* End Mac IE5 Filter */ div.left_menu { margin-top: -32px; width: 150px; border-left: 1px solid #cccccc; height: 250px; background: #fbfbfb; border: 1px solid #cccccc; } div.show_listing { margin-top: -32px; margin-left: 155px; width: 620px; border: 1px solid #cccccc; }
html Code: Original - html Code <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div>
<div class="container">
<div class="left_menu">
<div style="float: left;">
{link_one}
</div>
</div>
<!-- This part is actually on a separate script.. it gets parsed via php -->
<div class="show_listing">
<div style="float: left;">
-listing_text-
fsdfsadf<br>
</div>
</div>
</div>
Again sorry for my ignorance. ( just incase its viewable here ) i am having a serious issue with ie 7 i really need help. i am using a center layout using 900px the center layout looks and works fine in all browsers except for ie7 i have used a border for the wrapper tag. what i have noticed only in the case of ie7 is the left border for the wrapper tag starts a few pixels 2px or 3px before compared to all other browsers and due to this in ie7 the right border ends a few pixels when compared to all other browsers. so if i can fix the left border the right border for the wrapper tag will adjust automatically. i am using a valid xhtml transitional document. following is my code. ------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Background image</title> <style type="text/css"> body { text-align: center; margin: 0; font-family: Verdana; font-size: 10px; } #wrapper { width: 900px; text-align: left; margin: 0 auto; border: 1px solid #ffff00; } p{ margin: 0; padding: 0; } </style> </head> <body> <div id="wrapper"> <p>Content </p> </div></body></html> ------------------------------- can someone please tell me what the issue is and what the code should be. i would highly appreciate any help as this is an issue in ie7 and not in other browsers. thanks. |
|||||||