Learn VBA & Macros in 1 Week!

CSS - Css Negative Margin Screws In Ie

Full Excel VBA Course - Beginner to Expert

Css Negative Margin Screws In Ie	View Content

im using (stripped most) CSS:

Code:

h3 {
    margin-top:-10px;
    }

in this HTML

Code:

<h1>Header</h1>
<h3>subtitle</h3>

i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition.

is there any workaround for this

Full Excel VBA Course - Beginner to Expert

Safari Margin Issue - Not The Float With Negative Margin Bug

Similar Tutorials

View Content

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;
}

Ie 6 Div With Negative Margin

Similar Tutorials

View Content

In FF3 this code behaves correctly but not in IE6. The main content disappears. Any ideas why and how to fix it?

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>Untitled Document</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #00FF00;
  
}

#wrapper {
  font-size:0.8em;
  font-family:"Arial";
  position: relative;
  min-width:960px;
}

#container {
  margin: 0 auto;
  width: 960px;
  background-color: #fff;
}
  
#header {
  background-color: #0033FF;
  width:960px;
  padding-bottom:50px;
  height: 152px;
  
}

#contentWrapper {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  margin-top: -60px;
  z-index: 1;
  position: relative;
  background-color:#FFF;
  min-height:500px;
  padding-left:20px;
  padding-top:20px;
}

#mainContent {
  float:left;
  width:50%;
}

#services {
  padding-left:60px;
  float:left;
}

#footer {
  clear:both;
  background-color: #CC0033;
  clear: both;
} 
</style>
</head>

<body>
<div id="wrapper">
<div id="container">
<div id="header">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. 
</p>
</div>
<div id="contentWrapper">
<div id="mainContent">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. 
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. 
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. 
</p>
</div>
<div id="services">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
</div>
<div id="footer">
<p>
Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate. 
</p>
</div>
</div>
</div>
</body>
</html>

Help With Negative Margin-left In Ie 7

Similar Tutorials

View Content

Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here
mactyler.com/NEWIDF/
Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7.
iphonedevforums.com/news/index.php
I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions.

Negative Margin Issue

Similar Tutorials

View Content

I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box.

Code:

#inside_offset_image {
	width: 319px;
	float: left;
	margin-left: -225px;
	margin-right: 30px;
	margin-bottom: 30px;
}

But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser.

The actual test page is located he http://penncomm.com/bean/inside.html

Any ideas?

Negative Margin And Background In Ie

Similar Tutorials

View Content

when i scroll down and up again the background color is gone...

i see this happening when some of the div's inside some container get negative margin for some overlapping effect

sorry i have not the source immediatly but maybe you know what can cause this behaviour in IE?

otherwise i trim the code for display here....

Why Doesnt This Negative Margin Do Anything?

Similar Tutorials

View Content

Hi.

The main gallery image is pushed down from the top of the logo on the page below:

http://zombiemod.com/rm/nina2/main.php?g2_itemId=14

I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move.

The is the CSS I tried for the main-image-container div:
Code:

margin-top: -70px;

This is the HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

Why didnt my negative top margin work?

Negative Margin In Floating Div: Problems In Ie6

Similar Tutorials

View Content

Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions.

This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin.

The page and the CSS all validates fine.

<div id="main">
<div id="leftdiv" class="floatleft"> <p class="bold">Do you...
</p></div>
<div id="rightdiv" class="floatright"> <p class="bold right">Would you </p>
</div>
</div>

#main {
position: absolute;
height: 70%;
width: 70%;
left: 5%;
top: 100px;
overflow: auto;
}

#leftdiv {
position:relative;
margin-left: -109px;
top: 50%;
margin-top: -160px;
left: 20%;
width: 198px;
height: 299px;
padding: 10px;
}

#rightdiv {
position:relative;
top: 50%;
margin-top: -160px;
right: 20%;
margin-right: -109px;
width: 198px;
height: 299px;
padding: 10px;
}

.floatleft {float:left;}
.floatright {float:right; }

Safari Seriously Screws Up Margins

Similar Tutorials

View Content

Can anyone please tell me why Safari can't deal with these margins properly?

EDIT: Fixed. Removed link.

Vb3 Rc3 Generated Doctype Screws Up My Css

Similar Tutorials

View Content

I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything?

Also what the heck is all of this in my homepage?:
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>HotLink Forums - powered by vBulletin</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" />
<meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" />
<meta name="description" content="Message Boards for HotLink Hosting" />

Does the direction and lagnuage statements in the html tag matter towards anythign important?
What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there?
Do the meta tags below the title need to be below the title because I know I can put them above it with the others.
Also, why is there a blank white space at the top of the forums?
And why does the background to my td at the bottom not work?

Resolution Change Screws My Site

Similar Tutorials

View Content

i have hit a brick wall in the development of this site i began working on several hours ago.

i did not create the template or slice the images up.. i only wrote css + xhtml code.

here is what it looks like.. one in ff and one in IE..

http://i39.tinypic.com/35hicki.jpg

http://i41.tinypic.com/2wrq1d1.jpg

xhtml:
Code:

<?xml version="1.0" encoding="iso-8859-1"?>

<!-- 'About' Page -->

<!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" lang="EN">

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Professor Fountain's Cabinet of Wonder -- About</title>
<!-- Need to add Meta Tags -->
</head>

<body>
        <div id="container">

        <!-- Lets try setting up the left side of the page first. The way this is sliced will most likely mean the entire top banner will also need to be set up first. -->

        
        
        
        
        <!-- Here is the Banner -->
        <div id="banner_container">
            <img class="top_banner" src="images/index_01.gif" alt="Professor Fountain's Cabinet of Wonder - Top Banner" />
        </div>





        <!-- Next is the left part of the page... -->
        <div id="leftside_container">
            <img id="leftside" src="images/index_02.gif" alt="Cabinet of Wonder - Left Side" />
        </div>






        <!-- Next is the Navigation Bar -->
        <div id="nav_container">
        <ul>
            <li class="nav_item"><a href="about.html"><img class="nav_item" src="images/working_03.gif" alt="Main Navigation - About" /></a></li>
            <li class="nav_item"><a href="history.html"><img class="nav_item" src="images/working_04.gif" alt="Main Navigation - About" /></a></li>
            <li class="nav_item"><a href="performances.html"><img class="nav_item" src="images/working_05.gif" alt="Main Navigation - About" /></a></li>
            <li class="nav_item"><a href="contact.html"><img class="nav_item" src="images/working_06.gif" alt="Main Navigation - About" /></a></li>
            <li class="nav_item"><a href="links.html"><img class="nav_item" src="images/working_07.gif" alt="Main Navigation - About" /></a></li>
            </ul>
        </div>
        <!-- END OF NAV BAR -->



        <!-- Next is the right part of the page... -->
        <div id="rightside_container">
            <img id="rightside" src="images/index_08.gif" alt="Cabinet of Wonder - Left Side" />
        </div>
        <!-- END OF RIGHT PART OF PAGE -->



        <!-- Background of cabinet -->
        <img class="bg_image" src="images/index_09.gif" alt="The background of Professor Fountain's Cabinet" />


    </div>

</body>
</html>

css:
Code:

body { lowest
    z-index : -3 ;
    display : block ;
    background-color : #D2B48C ;
    margin-top : 10px ;
    margin-left : 10px ;
    width : 99% ;
}

h1.content_heading {
}

    #container {
        display : inline ;
        margin-top : 0px ;
        margin-left : 0px ;
        width : 917px ;
        height : 697px ;
        position : relative ;
        left : 10px ;
        top : 10px ;
    }

        img.bg_image {
            z-index : -1 ;
            display : inline ;
            position : relative ;
            top : -481px ;
            left : 109px ;
            width : 710px ;
            height : 481px ;
        }

        #banner_container {
            display : inline ;
            height : 220px ;
            width : 99% ;
            position : relative ;
            top : 10px ;
            left : 10px ;
        }

            img.top_banner {
                display : inline ;
                height : 220px ;
                width : 917px ;
            }

        #leftside_container {
            display : inline ;
            position : relative ;
            left : 10px ;
            top : 4px ;
            width : 109px ;
            }

            img.leftside {
                display : inline ;
                width : 109px ;
                height : 550px ;
            }
            
        #nav_container {
		z-index : -2 ;
            display : inline ;
            position : relative ;
            left : -45px ;
            top : -477px ;
            height : 48px ;
            width : 695px ;
        }

            div#nav_container ul {
                display : inline ;
                white-space : nowrap ;    
            }

            div#nav_container li.nav_item {
                display : inline ;
                width : auto ;
                list-style-type : none;
                
            }

            div#nav_container img.nav_item {
                display : inline ;
                border : medium ;
            }

            #rightside_container {
		    display : inline ;
		    position : relative ;
		    top : 3px ;
		    left : -55px ;
            }

            img.rightside {
                display : inline ;
                width : 109px ;
                height : 550px ;
            }

this is the first time i am ever attempting such a project.

Adding A Border Screws Up My Layout

Similar Tutorials

View Content

Hi, I'm having a strange problem. I finally got my layout designed so that it works in both IE and FF and will work scale correctly in relation to screen resolution but now with one aesthetic defect.

I have it set up so that the side navigation and the body are scaled 25%:75% but I would like a "thin solid" border between the two. My problem is that when i add the border it exceeds 100% and pushes the main content area underneath the menu.

Heres the code for the page; and yes the styles will eventually be moved to the external CSS. right now the only thing the external CSS provides is the body's background image.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE 2
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>

<!-- LOGO ROW -->
<div id="logorow" style="background-color: #FFFFFF; height: 100px; border-bottom: medium solid #7D5D10;">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">  
</div>
<!-- END OF LOGO ROW -->


<!-- TOP NAVIGATION ROW -->
<div id="topnavigationrow" style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; font-weight: bold; text-align: center; border-bottom: thin solid #7D5D10;">
INSERT TOP NAVIGATION ROW LINKS HERE
</div>
<!-- END OF TOP NAVIGATION ROW -->


<!-- CHANGING CONTENT AREA -->
<div id="changingcontent" style="background-color: #FFFFFF;">


  <!-- SIDE NAVIGATION AREA -->
  <div id="sidenavigation" style="background-color: #FF0000; width: 25%; float: left;">
  &nbsp;
  </div>
  <!-- END OF SIDE NAVIGATION AREA -->
  
  
  <!-- BODY CONTENT AREA -->
  <div id="bodycontent" style="background-color: #0000FF; width: 75%; float: left;">
  &nbsp;
  </div>
  <!-- END OF BODY CONTENT AREA -->
  
  
</div>
<!-- END OF CHANGING CONTENT AREA -->


</body>
</html>

I want to add "border-right: thin solid #7D5D10" to the side navigation section but when I do i'm faced with this problem. Any idea on a solution to this problem?

Oh yeah and as a side not all these sections will eventually have a white background so i'm not worried about the height of them not matching because it will be unnoticable, the sections are just colored so I can see where each section starts and ends.

And another random question i'm not too worried about:
If i fill a section (eg. the main content section) with a single character over and over past the width of the section without spaces it overflows and displays outside the div tags boundaries. Why does it do that? and is there anyway to make sure the text wraps in the extremely rare case this would happen?

Thanks in advance to anyone reading this

Mysterious 28px Margin Showing Up At Top Of Page (not A Collapsing Margin Issue?)

Similar Tutorials

View Content

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?

Space Below Form (have Tried Margin:0 And Bottom-margin:0)

Similar Tutorials

View Content

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">&nbsp;</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

On Paragraphs, Should I Define Bottom Margin Only Or Top Margin Also?

Similar Tutorials

View Content

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!

Margin Bug In Ie7: A Kind Of The Double Margin Bug...?

Similar Tutorials

View Content

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

Negative Padding?

Similar Tutorials

View Content

Hi.

I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image).

To sum it up, here is an image:

http://img40.imageshack.us/i/helpo.jpg/

Here is a link to the website: http://hiq.identityprojects.co.uk

Here is the code for the image:

Code:

h1#logo a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 250%;
	width: 283px;
	height: 92px;
         padding-bottom:-20px; 
	background: url(../images/logo.png) no-repeat;
	text-indent: -99999px;
}

The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me.

Negative Margins Ie 6

Similar Tutorials

View Content

I'm working on a set of tabs within tabs (or subtabs).

My code is something like this:

Code:

 <ul class="tabs" 
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
    </ul>

 <div class="tab_content">
    <ul class="subtabs">
       <li class="selected">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
    </ul>

Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this?

Ie And Negative Margins?

Similar Tutorials

View Content

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!

Safari Negative Margins

Similar Tutorials

View Content

I am having trouble getting safari to recognize my negative margins. It works in IE6,7 and Firefox. I am trying to center the page but to get the first 327 pixels on the left and last 327 on the right to be a negative margin and my center column to have a 1000px fixed width. Here is my css. Any help would be great!

.bkg-tile-left {
background-image: url(/images/bkg-tile-left.jpg);
background-repeat: repeat-y;
width: 327px;
text-align: left;
float: left;
overflow: visible;
}

#bkg-tile-right {
background-image: url(/images/bkg-tile-right.jpg);
background-repeat: repeat-y;
width: 327px;
background-position: right;
text-align: right;
float: right;
clear: both;
padding-right: -327px;
}
#bkg-right {
background-attachment: scroll;
background-image: url(/images/bkg-img-right.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}
#bkg-left {
background-attachment: scroll;
background-image: url(/images/bkg-img-left.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 100%;
}
#box1 {
margin-left: -327px;
margin-right: -327px;
position:relative;
}

AND HTML

<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" id="box1">
<tr>
<td valign="top" class="bkg-tile-left" height="100%"><div id="bkg-left"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td>
<td valign="top"><table id="Wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="print_header"><dtml-var standard_print_header ><img src="images/spacer.gif" width="1px" height="1px"></td>
</tr>
<tr>
<td><dtml-var standard_html_header2></td>
</tr>
<tr>
<td><table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="BreadCrumb"><dtml-var standard_html_breadCrumb></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<dtml-if standard_html_sidebar>
<td valign="top" id="body_content2"><dtml-var body_content2></td>
<td valign="top" id="Sidebar2"><dtml-var standard_html_sidebar2></td>
<dtml-else>
<td valign="top" id="body_content2"><dtml-var body_content2></td>
</dtml-if>
</tr>
</table></td>
</tr>
<tr>
<td id="Footer2" ><dtml-var standard_html_footer2></td>
</tr>
</table></td>
<td valign="top" id="bkg-tile-right"><div id="bkg-right"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td>
</tr>
</table>

</div>
</body>

Negative Margins And Opera 9.5

Similar Tutorials

View Content

Does anyone know how to get this code to display correctly in Opera? HTML4STRICT Code:
Original - HTML4STRICT Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> p { } .mouse { display: inline-block; padding: 6px; margin: -6px; } .mouse:hover { background: #888; border: 2px solid black; padding: 4px; } </style> </head> <body> <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p> </body> </html>

  

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


 "http://www.w3.org/TR/html4/loose.dtd">


 <html>


 <head>


 <meta http-equiv="X-UA-Compatible" content="IE=8">


 <style type="text/css">


 p {


 }


 .mouse {


  display: inline-block;


  padding: 6px;


  margin: -6px;


 }


 .mouse:hover {


  background: #888;


  border: 2px solid black;


  padding: 4px;


 }


 </style>


 </head>


 <body>


 <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p>


 </body>


 </html>

I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins.