SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div won't obey css!

    I have this div id:

    Mark-up is here.
    Code:
    #left-side {
            position: absolute;
    	text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	margin: 10px;
    	width: 262px;
    	border: 1px solid green;
            voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 260px;
    	}
    body>#left-side {width:260px;}
    It should encompass my java-enabled divs on the left , but it does not. I put a green border around it so you can see what I mean. I have told it to obey in the css but I must not be yelling loud enough, or correctly.

    I would appreciate any input.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try not using the hyphen in your ID name.

  3. #3
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Try not using the hyphen in your ID name.
    Thanks Vinnie, but no go. What else could it be?

    Code:
    #leftside {
            position: absolute;
    	text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	margin: 10px;
    	width: 262px;
    	border: 1px solid green;
            voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 260px;
    	}
    body>#leftside {width:260px;}
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  4. #4
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about some coordinates for your absolute position?

  5. #5
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interesting...

    Quote Originally Posted by earther
    How about some coordinates for your absolute position?
    Thanks, earther. I tried that before, but I thought I would try it again, for maybe I missed something, and I noticed that wile my green border will not encompass the whole kabaab, the div stack below seems to act like it is indeed contained within the #leftside div.

    Now why would the border not go around everything, and yet the stacked divs still actually be inside the #leftside div?

    I should note that it only acts that way in Moz and Opera...IE barfs as usual. In fact, the stacked divs (#ford, #chevrolet, etc.) render in the middle of my #container div in IE.

    Mark-up is here

    Code:
    #leftside {
            position: absolute;
    	top: 5px;
    	left: 5px;
    	text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	margin: 10px;
    	width: 262px;
    	border: 1px solid green;
            voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 260px;
    	}
    body>#leftside {width:260px;}
    Thanks for your help guys.
    Last edited by garlinto; Jun 12, 2003 at 16:18.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  6. #6
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok, I think I know what's going on...

    I think I have finally figured out what my difficulty is:
    The trouble doesn't appear to be so much with the #leftside div as it is with the stacked divs I am trying to nest inside the #leftside.

    If I position the stcked divs with position:relative, then the green border does indeed go around everything and the divs render inside the #leftside div. However, this is unacceptable since I need the divs to stack up on top of each other, and with pos:relative they all render, each one below the preceeding div.

    But with position:absolute the stacked divs render as a stacked group, but then the #leftside div does not seem to flow around them; they do not nest properly.

    I would really like to sove this problem for layout purposes, and to keep everything organized.

    Here is the css for the stacked divs and my #leftside div, as well as the other div ids in the #container group, with the mark-up being here

    Code:
    /* Div ID's */
    #ford, #chevrolet, #dodge, #toyota, #other	{
    	position: absolute;
    	margin: 10px;
    	top: 260px;
    	border: 1px solid purple;
    	width: 247px;
    	height: 557px;
    	background-color: #fff;
    	z-index: 0;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 245px;
    	height: 555px;
    	}
    body>#ford, #chevrolet, #dodge #toyota, #other {width:245px;height: 555px;}
    
    #leftside {
            position: absolute;
    	top: 5px;
    	left: 5px;
    	text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	margin: 10px;
    	width: 262px;
    	border: 1px solid green;
            voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 260px;
    	}
    body>#leftside {width:260px;}
    
    #container {
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	text-decoration: none;
    	background-color: #fff; 
    	position: relative;
    	clear: left;
    	top: 10px; left: 0px;
    	width: 704px;
    	visibility: visible;
    	border: 2px solid black;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 700px;
    	}
    body>#container {width:700px;}
    
    
    #container .centertext {
            position: relative;
    	width: 35%;
    	margin: 10px;
    	float:right;
            border: 1px solid blue;
    	}
    
    #box {
    	font-size: 8pt;
    	font-family: verdana, arial, courier;
    	background-color: #f1eeee; 
    	position: relative;
    	float: right;
    	margin-right: 10px; margin-bottom: 10px; margin-top: 10px;
    	padding: 5px;
    	top: 0px; left: 0px;
    	width: 152px;
    	border: 1px solid red;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 140px;
    	}
    body>#box {width:140px;}
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  7. #7
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any ideas on this one?

    Perhaps I need to include more information?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •