|
CSS - Margin Whitespace In Ie Help... Argh !
heya still very new to css and IE is displaying whitespace between the two navigations and i cant fr the life of me find a fix... Well i set #tabcontentcontainer margins to -5 top it closes it but then displays wrong in firefox, is there a way to fix this ?? any help would be great thx.
eg. Code:
#tabcontentcontainer{
margin: -5px 0px 0px 0px;
}
http://www.oraclestudio.com.au/css/start.php http://www.oraclestudio.com.au/css/style/two.css Similar TutorialsHowdy, Very simple css layout, but IE (7) is messing it up. What else is new. Header div is centered with the curved top border (16 pixels high), uses background tag in css. body mas a main background, which is centered. it's an 800pixel wide gif with 20 pixel sides which leaves 760 white pixels in the middle. main container is 760 pixels wide, and centered thus creating the layout. header and body combined should make a seamless border around the main container. but it doesn't in IE. why not?!?! it works well in FFX, Chrome, Safari, Opera. argh. can't seem to post urls, so i'll have to post my code: html: 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> <title>GreenSky Capital Inc. :: Customized Financial Solutions :: Home</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="container_main"> Put some text here. </div> </body> </html> CSS: Code: html,body {
margin: 0px;
padding: 0px;
background: #e0e0e0 url(../images/bg_main.gif) repeat-y center top;
font-family: verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6C6C6C;
text-align: center;
}
#header { margin: 0 auto; width:800px; padding:0; height: 16px; background: #e0e0e0;background: url(../images/bg_top.gif) no-repeat top right ;}
#top_nav { margin: 0; padding:0; width:230px;height: 180px;}
#top_sep { margin: 0 auto; padding:0; }
#container_main { margin: 0 auto; padding:0;width:760px; background:#fff; }
#container_content { width:720px; margin: 0 20px 0 20px; background:#fff; text-align: left; }
#roscripts_m4 { margin:0; padding:0;width:100%;}
#roscripts_m4 li { margin:0; padding:0;display:inline;list-style-type: none; }
#roscripts_m4 a:link, #roscripts_m4 a:visited { color: #056839;width:230px;text-align:left;text-indent:15px;float:left;font-size:11px;height: 30px;line-height: 30px;font-weight: bold;text-decoration: none;border-bottom:1px solid #6AB94E;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, #roscripts_m4 a:hover {color: #fff;background: url(../images/bg_nav.gif) no-repeat top left ;}
#news, #support {background: #efefef; }
#footer { margin: 0 auto; padding:0; width:760px; height: 30px; clear:both; text-align: center;}
.sidebox { margin-top:40px; background: url(../images/bg_side.gif) no-repeat top center; height: 300px;}
.sidebox_head h2 { margin: 0; padding: 16px; 0 0 10px; color: #fff; font-size: 12px; }
.sidebox_body { margin: 0; padding: 0 0 0 10px; border: 0; font-size: 11px; }
.sidebox_body p, .sidebox_body form {margin: 0; padding: 0;}
.sidebox_body form label { width: 200px; position : relative; display : block; }
.sidebox_body form label input { position : absolute; left : 40%; top : 0px; }
.sidebox_body form input,.sidebox_body form textarea { font-size: 10px; border: 1px solid #c0c0c0; background: #e0e0e0; }
.sidebox_body form textarea { font-family: verdana, arial, helvetica; font-size: 10px; width: 200px; height: 50px; overflow:hidden}
.sidebox_body form span { float:right;margin-right:20px;}
.sidebox_body form submit {border: 1px solid #c0c0c0; background: #e0e0e0;}
#content_right h1 { font-size: 20px; color: #056839; width: 100%; border-bottom:1px solid #056839; }
#content_right h2 { font-size: 12px; color: #056839; width: 100%; }
#content_right li {padding-bottom: 10px;}
any help would be much appreciated! thanks, ynot2k Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. I have now spent the last 14 hours trying to rectify some problems I am having after I re-coded the page to change tables to CSS. The main area is overlapping with the right area. The site should look like this: http://www.attorneywebcreations.com but it looks like this in CSS format: http://www.attorneywebcreations.com/test.html Someone please help! http:// 192.168.0.253/ index.php?option=com_content&view=article&id=50&Itemid=67 I need for the content to stack in front of content (as it currently does) so the content appears to scroll behind it. BUT - I need for the footer to sit at least below the fold so that it isn't so obtrusive. I'm tired of googling and can't spend any more hours trying to get it to work!! It's an artisteer template, joomla. Help? THANK YOU!! 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 everyone, On the profile section of a site I created for a guy there is yet another annoying whitespace issue that pops up in FF and oddly enough looks fine in IE7. Using firebug I can fish in the general area but my fixes seem to break things worse. Here is an example profile where you notice the large space between the bottom of the profile pic and the tabbed interface below. I tried adding a fixed height to .cbPosTop which didn't work and I knew it wouldn't. Anyway, like I said before it looks fine regardless of profile pic size in IE. Here is a link to a screenshot of what I'm seeing using FF... http://www.karenwilliamson.com/test/spot_profile_ff_whitespace.gif Thanks for any input I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this. 1. Block had some sort of padding or whitespace on the right side for some reason. 2. Search button width is short. Problem in red: URL Site: URL CSS: URL Can someone give me a solution or work around for this problem. P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work. Hi there, This is my first post here and already I'm asking for help. I'm new to CSS layout and have read quite a few tutorials and "zeroed" my values for IE but have come across my first rendering issue which I hope you can help me with. I've attached an image of the dreamweaver layout and how firefox is rendering the page as well as the source of the page in a txt file. Why is the whitespace appearing in Firefox and not in IE? Thanks in advance for any guidance. I'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image. Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs. Here is the Code Code:
CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px; /*** Critical left col/divider dimension value ***/
margin-left: -176px; /*** Critical left col/divider dimension value ***/
}
*>html .left {width:176px;} /*** Fix only for IE/Mac ***/
.container-left {
width: 175px; /*** Critical left col dimension value ***/
padding-bottom: 110px; /*** To keep content from going underneath the AP bottom boxes ***/
}
.menu-main{
margin-left:1px;
border-bottom:1px solid black;
}
XHTML
<div class="left">
<div class="container-left">
<div class="menu-main"><img src="images/home_off.jpg" /></div>
<div class="menu-main"><img src="images/awards_off.jpg" /></div>
<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
<div class="menu-main"><img src="images/membership_off.jpg" /></div>
<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
<div class="menu-main"><img src="images/events_off.jpg" /></div>
<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
</div>
</div> <!-- end left div -->
Any suggestions? The images are all 174px in width Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that? Any help would be greatly appreciated. PS - I tried this on another PC with IE6 and sp2, and it was fine. These are the style declarations: Code: .menuHeading{
padding-left:3px;
font-size: 8pt;
font-weight: bold;
background-color: #ffffff;
color: #000000;
cursor: default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.menuHeading_highlight{
padding-left:3px;
font-size:8pt;
font-weight:bold;
background-color:#fff392;
color:#000000;
cursor:default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.subMenu{
font-size:8pt;
color:#cc9900;
width: 200px;
visibility:hidden;
cursor:default;
position: absolute;
padding:0px;
margin-top:0px;
margin-left:0px
}
I am trying to create a personal website for employers. Already have the web domain and figure its a great way to brush up on everything. I am trying to get rid of the whitespace that constantly surrounds my div or table tags. I know about background-fill but that only seems to work in the html style and with only 1 background. This is what I want. Instead, I keep getting this annoying whitespace around everything that I cannot get rid of. How do I fix this? In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me the url is www.devwebsites.com heres the code Code:
<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
color: #FFFFFF;
text-decoration: underline;
}
a:visited, body_avisited
{
color: #4B5970;
text-decoration: underline;
}
a:hover, a:active, body_ahover
{
color: #FF6600;
text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;
}
.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>
<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div
<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> BBoardX Forums
</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
/><input type="checkbox" name="remember" />Remember me<br />
Password <input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>
and yes ryan420 i know what your going to say when (if) you see this thread link lol http://josephman1988.tripod.com/ Test page. In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE. Why? And how can i fix this? Thanks for the help. Joe. Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF. http://www.beta-designz.co.uk/manicgaming/ CSS: Code: #wwd
{
width:550px;
height:auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
padding:6px;
}
HTML: Code: <div id="wwd"> <h3>This Is What I do!</h3> <span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div> Help would be great, regards, J. Here's the website example: http://www.justuskennels.net In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/ The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover. If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out? Navigation CSS: Code: /* Navigation Menu Styling */
#menu { font-size:90%;
margin:0px 0px 0px 17px;
text-align: center;
font-weight: bold;
padding-bottom:50px;
background:none;
text-align:center;
line-height:100%;
}
#menu ul { list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
}
#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}
|
|||||||