CSS - Setting Starting Point For Margins

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.

Yeah so I am trying to get the main structure of a site set up and I am struggling mightily with the CSS. I'm simply trying to layout the page with:


four divisions: 3 vertical and one horizontal

There is a 10px space between top bottom left and right.

My problem at the moment is fitting the horizontal division correctly...

Here is the css... all divs are nested inside a wrapper div...
Code:

@CHARSET "UTF-8";
.wrapper{
   position: relative;
   float: lt;
   left: 0px;
   width: 100%
   margin-bottom: 10px;
   padding-right:0px;
   margin-right:0px;
   background-color: #221526;
}
.left1{
   position: relative;
   float: left;
   left: 10px;
   width: 10%;
   height: 415px;
   background-color: #2C1D30
}
.left2{
   position: relative;
   float: left;
   left: 1px;
   width: 80%;
   height: 415px;
   background-color: #2C1D30
}
.right{
   position: relative;
   float: right;
   right: 10px;
   width: 10%;
   height: 415px;
   background-color: #2C1D30;}
 .bottom1{
 	position: relative;
	float:none;
	top:415px;
	left:10px;
	
	background-color:#2c1d30;
	width: 1375px;
	right: 10px;
	height: 140px;
 }
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #221526

And if I'm approaching the coding in unadvisable ways (using % for example) please let me know...
Thanks for the help.

I put a fairly large image and centered it using.

Code:

background: #484747 url(img/main.png) fixed;
background-repeat: no-repeat;
background-position: center;

That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter"

So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup.

Hello all,

I am dynamicly creating a table with the following structu

Code:

<table id="plate_header">
  <tr>
    <th><a class="header_link" href="link">Header 1<img src="arrow"></a></th>
    <th><a class="header_link" href="link">Header 2</a></th>
    <th><a class="header_link" href="link">Header 3</a></th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

with the following CSS:

Code:

  table {
    padding: 1em;
    border: 1px solid #dddddd;
  } /* end table */
  
  .cell { border: 1px solid #dddddd; }
  td { padding: 1em; }
  th { 
    background: #206296; 
    padding: 0 1em;
    font-weight: bold;
    color: #ffffff; 
  }
  a:link.header_link,
  a:hover.header_link,
  a:active.header_link,
  a:visited.header_link { color: #ffffff; }
  
  #plate_table td { vertical-align: top; }

The problem is in some cases, the <th> is the largest item in that column. So whenever the arrow image appears with it, it will be placed on a new line. How can I force it to be on the same line as the text?

Hi All,

I have been trying to find out a small mistake in my css since yesterday morning. But now I can't just go with it and seeking someone else eye to correct it.

Basically its working fine in FF but not coming properly in IE7. The bottom background is not comming and I think the main background is overriding it. Please check the below url and let me know where I am doing wrong.

http://dev.axia.co.uk/test.htm

Thanks you for your time.

Hi, all! I'll try to be as concise as I can with this Q.
Basically, I want div to float to the right edge within a (for example) 500px div; unless the window size is less than 500px and cutting off part of the parent div. In this case I'd like the child div to float as far right as possible while staying visible.
Forgive me if this is simple to do with css; I have a head full of cold medication at the moment! :S
Thanks!

PS the reality of what I'm trying to do is show the left half of a background image off to the left of my content (child div) only if there's room. Otherwise, the content should appear over top of this left section.

Ok I fully understand the benefit of using css for text (easy site wide font changes etc) but is there really any point in using css for layouts?

I understand that traditional table based layouts are a nest of cells which creates problems for text readers and large pages which we try to reduce by slicing images up, setting background colurs in html etc

BUT

When using css for layouts we tend to use much larger graphics - typically the header is a single graphic rather than several slices.

Through a bit of testing I have deduced that creating a page with tables with the same reduced level of slicing as for a css layout (ie just header, sidebar, content and footer), results in a comparable total page size and has no nested tables to confuse screen readers.

The real clincher for me is that using a simple table layout rather than css for layout results in a page which displays exactly as I want it across browsers and so I don't spend days testing and moving things backwards and forwards to get a compromise layout.

I realise this is heresy to suggest that tables migh be better and I await the more experienced here putting me right.

Is there a way to stop using a CSS after a certain point in your code?

I am trying to do this as I have a CSS for my site which I am including vBulletin into which has its own CSS file, which messes up the formatting from my CSS file and vice versa.

is it possible to change the bullet point color only of a list?

Hi,

I have a drop down menu using <UL> and <LI>. Is there a way i can reduce the left indent from where the bullet point would normally be?

Many thanks

Not sure where to put this because it involves php, dhtml, css and layers?

But anyway I'll give it a shot here. I have a problem that I can't seem to tackle.

Basically what I need is:
I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page).

I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible)

Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ.

Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL):
PHP Code:
//get xy coordinates of primary position
$locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de ");
$locbasered = mysql_fetch_array($locbase);
$xred = $locbasered["lb_xcoord"];
$yred = $locbasered["lb_ycoord"];
//get xy coordinates of other positions on the same map
$locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de ");
 
//position the map at coordinates 0-0
echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>";
 
//position the primary position on the map in a layer on top of the map layer
echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>";
 
//create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer
$k = 3 ;
while( $locothers = mysql_fetch_array( $locotherbases ) ) {
$xgrey = $locothers["lb_xcoord"];
$ygrey = $locothers["lb_ycoord"];
echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; 
$k++ ;
} 




Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line.

Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?)

Anyone any idea how to do this?
(or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page)


Thanks for any feedback!
Cheers,
Gurt

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?

ok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with.

thanks in advance,

Trizen

www dot cooperativecreditsystems slash Untitled-2 dot html

apparently being a new user i cant post links but just add the dots as dots and you should be able to find it.

Hello,

I have the following issue. I need to create a full screen gray div with another white div inside it, positioned with 5 pixel margin. Basically it looks like a white div with 5px border around it. That wouldn't be a problem after i set body and html height to 100%, but here's what breaks: i add the first gray div (relatively positioned) and make it's min-height: 100%, then add lots of text and see if it autoexpands. It does! Now i add another absolutely positioned white div inside of it and set its position to 5px from each side. And now everything breaks ... doesn't autoexpand ... at least in opera. Here's the css:

Code:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#maindiv {
    position: relative;   
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    background: #777777;
}
#fullscr {
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    background: #FFFFFF;
}

<div id="maindiv"><div id="fullscr">
lots of text with linebreaks
</div></div>

Does anyone have any ideas how to make it work?

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.