Learn VBA & Macros in 1 Week!

CSS - Similar Except Deals With Margins

Full Excel VBA Course - Beginner to Expert

Similar Except Deals With Margins	View Content

similar to the text margins in IE that was solved by adding the *html#center
{height:1px}
after my center div rules in teh style sheet.

I noticed that with these divs:

#leftnav
{
float: left;
width: 200px;
margin-top:177px;
padding:0px;
background-color:transparent;
border-right:1px solid #000;
}

#rightnav
{
float: right;
width: 175px;
margin-top:0px;
padding:0px;
background-color:/*#E3E7EC*/#fff;
border-left:1px solid #000;

}

#center
{
margin-left: 200px;
margin-right: 175px;
margin-top:1px;
padding:0px 0px 0px 0px;
background-color:transparent;
/*background-image:url(blockimages/center_title.jpg);
background-position:top left;
background-repeat:no-repeat;*/
border-right:1px solid red;
border-left:1px solid blue;
}

* html #center {
height: 1px;
}

the broders I used on the center div as guides line up with the columns on the left and right, but in IE (again) the center column now has a 2 to 3px margine between the columns on either side...is this just a drawback to using that little hack so the text will align in IE? I guess this is down side to solving the CSS issues...solve one, see another...

thanks

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Paddings & Right&left Margins Always Combine, But Bottom & Top Margins Don't, Right?

Child Margins Controlling Parent's Margins

Difference Between Margins In Ie And Margins In Ff

2 Background Images On One Div Or Similar ?

Creating A Re-usable Quote Box...similar To A Rounded Box

Border Style Similar To That Of A Select Drop Down

Using Em's To Fix Margins

Ie And Negative Margins?

Auto Margins In Ie

Margins Not Working

Ugg, Maybe Collapsing Margins?

Setting Margins

Margins (was Marg)

Margins Changing On Ie

Ie And Body Margins

Negative Margins Ie 6

Css Margins Need Attention

Margins / Top Inconsistent

Problem With Margins

Possible With Css? Margins And Floats

Learn VBA & Macros for Excel in 1 Week!

Paddings & Right&left Margins Always Combine, But Bottom & Top Margins Don't, Right?

Similar Tutorials

Hi!

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?

Child Margins Controlling Parent's Margins

Similar Tutorials

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.

Difference Between Margins In Ie And Margins In Ff

Similar Tutorials

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.

2 Background Images On One Div Or Similar ?

Similar Tutorials

Hey all
I'm trying to get to images to go to the sides of my content
div. I've been looking on Google and everyone says you cant
have 2 background images on 1 div (well is CSS2 anyways)
is there any other ways of achieving this?

also firefox is putting a space between my nav div and my content
div, but IE7 doesn't, any ideas?

Heres my HTML:
Quote:
<!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>RWD</title>
<link href="rewebdesstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="l_container">

<H1>Reflective Web Design</H1>

<div id="l_nav">
<br />
Home News Bio Portfolio Gallery Links Contact</div>


<div id="l_content" class="l_cont_left">
<p> </p>
<p>  </p>
</div>

</div> 

Heres my CSS:
Quote:
body
{
text-align: center;
margin: 0px;
padding: 0px;
background-color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
h1 {
background-color: #666666;
background-image: url(images/l_banner.jpg);
background-repeat: no-repeat;
height: 150px;
width: 1024px;
color: #FFFFFF;
text-indent: -9999em;
margin: 0px;
padding: 0px;
}

#l_container {
margin-left: auto;
margin-right: auto;
width: 1024px;
text-align: left;
}
#l_nav {
position: relative;
height: 60px;
width: 1024px;
background-image: url(images/l_nav.jpg);
color: #666666;
font-size: 14px;
font-weight: bold;
text-align: center;
word-spacing: 4ex;
}
.l_cont_left {
background-image: url(images/l_left.jpg);
background-repeat: repeat-y;
background-position: left top;
position: relative;
width: 25px;
}
.l_cont_right {
background-image: url(images/l_right.jpg);
background-repeat: repeat-y;
background-position: right top;
position: relative;
width: 25px;
}

#l_content {
position: relative;
width: 1024px;
background-color: #7F969E;
margin: 0px;
padding: 0px;
}
#l_footer {
position: relative;
height: 67px;
width: 1024px;
}

Here's where its hosted

what i want it to look like (different fonts tho)

What ive got so far

Cheers
Lance

Creating A Re-usable Quote Box...similar To A Rounded Box

Similar Tutorials

attempting to create a re-usable quote box like on this website right at the top, http://pownce.com/download/

I would prefer not to use an image, and I swear I have seen a tutorial or some variation of how to do this. I know there are several that are with rounded boxes, but I would like to create something like this, no rounded boxes involved.

Thank you for ANY help.

Border Style Similar To That Of A Select Drop Down

Similar Tutorials

Hi,

I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down?

thanks and regards,
Sim085

Using Em's To Fix Margins

Similar Tutorials

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?

Ie And Negative Margins?

Similar Tutorials

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!

Auto Margins In Ie

Similar Tutorials

Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1

Margins Not Working

Similar Tutorials

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

Ugg, Maybe Collapsing Margins?

Similar Tutorials

I thought I had this worked out before with the help of this forum, but it seems to be back again!

In IE 6 (and maybe others, who knows. I am running Ubuntu =/ ) there is a big gap between the top horizontal nav and the comic.

http://www.jjsunshines.com/

Any help would be greatly appreciated! I'll even trade you php help!

Setting Margins

Similar Tutorials

Hi All,

I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this,

margin:0px 31px 0px;

Is it top,right and bottom?

Thanks

Prena

Margins (was Marg)

Similar Tutorials

I have a couple of problems.

1) I have an unwanted margin around my page. I have tried and searched everything I could to get rid of it and I cannot. Ca someone please explain why it is doing this?

2) No matter how hard I try, the Navigation list will not move to where I would like it to go (Centered in the grey area). What am I doing wrong? Code below

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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./CSS/style1.css" />
<title>Cakefaced - Miles out of the box</title>
</head>
<body>
<div id="Banner" />
<div id="Logo" />
<div id="NaviRear" />

<ul class="NaviLink">
<li class="NaviLink"><a class="NaviLink" href="index.html">Home</a></li>
<li class="NaviLink"><a class="NaviLink" href="index.html">Projects</a></li>
<li class="NaviLink"><a class="NaviLink" href="index.html">Geuestbook</a></li>
<li class="NaviLink"><a class="NaviLink" href="index.html">Profile</a></li>
</ul>
</div>
<div id="Blog" />
<div id="Links" />
</body>
</html>

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/*CSS Sheet Copyright(C) 2011 to Cakefaced.co.uk All Rights Reserved
This style sheet cannot be used without permission from Cakefaced.co.uk Administrator */

/*
-----------------------------------------------------------------------------------------------
Begin Banner Styling
-----------------------------------------------------------------------------------------------
*/
#Banner {
background-image:url('../Images/BannerRear.jpg');
background-repeat:repeat-x;
height:200px;
margin:0;
position:relative;

		}
/*
-----------------------------------------------------------------------------------------------
End Banner Styling
-----------------------------------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------------------------------
Begin Navigation Styling
-----------------------------------------------------------------------------------------------
*/
#NaviRear {
background-image:url('../Images/NaviBack.jpg');
background-repeat:repeat-x;
top:150px;
height:60px;
margin:0;
position:relative;

	}



ul.NaviLink {
list-style-type:none;
margin:0;

		}
li.NaviLink {
display:inline;
bottom: 10px;
position:float;
		}

a:link.NaviLink {
font-size:1.875em;
color:#000000; /* unvisited link */
font-family:"Arial Black", Gadget, sans-serif;		
		}    
a:visited.NaviLink {
color:#000000; /* visited link */
		} 
a:hover.NaviLink {
color:#FF00FF; /* mouse over link */
		}   
  
/*
-----------------------------------------------------------------------------------------------
End Navigation Styling
-----------------------------------------------------------------------------------------------
*/

Margins Changing On Ie

Similar Tutorials

Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation)

http://section31.us/temp/tortilla/tortilla.html

Note: This works fine on firefox, but goes ape**** on IE.

Ie And Body Margins

Similar Tutorials

'Ello,

I have a slight problem with some CSS I am using, it works perfectly fine in other browsers but in IE 6 it doesn't. What I basically want is the body of the page to have a 10pixel margin on the left and right of the page and 0 at the top and bottom, this bit I can do. I also want everything on the page to stretch from the end of each margin (so they basically start 10 pixels in from the left and 10 pixels in from the right), which I have got working fine. Now what I am trying to do is have one div layer stretching from the very left to the very right of the page and I am getting a bit stuck on it.

What I have managed to do is set that div layer to be absolute positioning so I can use "left: 0px;" to get it all the way up against the left hand edge, but how can I get it right up against the left hand edge? I am sure if I set it to be the width of the page so for example if the page is 500 pixels wide and I use "width: 500px;" it would go from end to end, but what I want is it to go from end to end no matter what the width of the window is. For the rest of the layers that are not going from end to end but are staying within the body margins I used "width: 100%;" which works fine, but when I try it with the one that I want to go from end to end it only goes up to the body margin, but right to the end, well in IE it does anyway other browsers are fine with it. Does anyone know how to get around this? I have tried looking on the net but I can't find anything on it. All help will be greatly welcome.

Thank you in advance, El Barto.

Negative Margins Ie 6

Similar Tutorials

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?

Css Margins Need Attention

Similar Tutorials

Margins / Top Inconsistent

Similar Tutorials

Hey, I am currently learning how to do layouts in pure CSS and am running into a few problems. Some of these i've cleared up, but i'm still learning obviously. My currently issue is that margin / top settings are not consistent throughout browsers.

Example: in FF/Mozilla a margin setting or "top" pixel setting is "lower" than in IE.

The reason for this is, apparantly, when margins are set to zero my lower div table actually rides up "under" the above div's bottom border, this creates an offset of 5 pixels when setting margins, etc. Whereas, in IE, the div sits directly beneath the 5px border, as I would assume it should.

Here are the files i'm using:

1) Webpage: http://www.binjured.com/index2.php
2) CSS File: http://www.binjured.com/style2.css

important css (as i see it) a #nav, .top, .main (these are all near the bottom of the file, if you wish to skip extraneous code). I am trying to understand WHY css does the things it does and how I can make it do the right thing. Any help would be extremely appreciated. Finally, there may be some extraneous code that those who know css, know does nothing. It's in there because I am trying to "debug" it but i'm completely lost for the answer now .

Problem With Margins

Similar Tutorials

Why doesn't the following code result in a blue border that is 10px wide?

PHP Code:
<Table>
    <tr>
        <td style="background-color: 0000FF;">

            <Table>
                <tr>
                    <td style="background-color: FF0000; padding: 10; margin: 10; border:  10px solid #00FF00;">
                        Test Font
                    </td>
                </tr>
            </Table>

        </td>
    </tr>
</Table>

Possible With Css? Margins And Floats

Similar Tutorials

Hi,

My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin:

HTML
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</body>
</html>

CSS:
Code:

div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}

The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve.

Can anyone help me with this?