CSS - Any Way To Make This Work In Ie

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>  

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

Hi!

What do you think of this Javascript "make IE 6 work exactly like IE7"?

http://dean.edwards.name/IE7/

Thank you

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF?

HERE is my link.

Many thank yous from the CSS noob.

Hi...

Can any body tell me how to make effect mentioned below.

http://forums.devshed.com/archive/t-175080

Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc.

I need this type of effect for my web site, can any body tell me how to make this....

Thanks

Hi,

I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page.

I have a div called MainSection as follows :

#MainSection {
position: absolute;
border: 1px solid #000033;
top: 100px;
left: 1px;
width: 777px;
z-index: 0;
}

Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows:

.WhereYouAre {
position: absolute;
width: 500px;
top: 8px;
left: 205px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #000033;
}

#LeftPanel {
position:absolute;
top: 3px;
left: 3px;
width: 190px;
border: 1px solid #000033;
}

#MainBodyContent {
position: absolute;
border: 1px solid #000033;
padding: 0px 5px 5px 5px;
top: 5px;
left: 200px;
width: 567px;
z-index: 0;
}

Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav:

#BottomNav{
position:inherit;
margin:10px;
border-top: 1px solid #000033;
border-bottom: 1px solid #000033;
width: 780px;
left: 0px;
}

The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection.

Thanks a lot for any suggestions,
J.

Hi guys
I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column
I'm making a complete tableless css layout for the first time

Look:


Here's the skeleton code
Code:

<!-- Begin Left Column -->
	<div id="cssleftcolumn">
	HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS)
	<div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div>
	</div>
<!-- End Left Column -->

And here the css code
Code:

#cssleftcolumn { 
	width: 218px;
	float: left;
	color: white;
}

#imagedownmenu {
	background-image: url(../images/fondo_botleft.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
	height: 76px;
	vertical-align: bottom;
}

I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this

Thanks a lot in advance,

Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly).

I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated!

Hi,

I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page.

I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others).

Any ideas?

W.

Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1

The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that?

Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it.

(an expample is the HTML code that it would be)

Code:

<table width="150" border="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr>
</table>

I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing!
Cheers,

Anyone knows how to make the standardized border as the attached file ? cheers.

Hi

I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks

http://www.webpagedesignrus.co.uk/DECS

Code:

#container {
	margin: auto;
 	width: 100%;
 	display: block;
	text-align: center;
	height: 100%;
}

#middle {
	text-align: left;
	margin: auto;
	width: 600px;
	height: 100%;
	background-color: #FFF;
}

#main {
	margin: auto;
	background-color: #FFF;
	border-left: solid black 1px;
	border-right: solid black 1px;
	width: 650px;
	height: 100%;
	cell-padding: 0px;
	cell-spacing: 0px:
}

I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help...

I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at.

So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>.

So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers??

Thanks,
FletchSOD