Jump to content

A-Damage

Members
  • Posts

    16
  • Joined

  • Last visited

A-Damage's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Yah, sorry about not posting the code. But, I did find a solution. I basically put a container inside the container, something like: <div class="container"> <div class="main"> <div class="left pane"></div> <div class="right pane"></div> </div></div> I then gave the main, left pane, and right pane divs all float lefts. For whatever reason, this fixes the problem. Thanks for the response anyway.
  2. Aha, but see, the problem is that if you declare float or position:absolute for any inner divs, Firefox now thinks, for whatever reason, that the inner divs are no longer contained in the outer div, and if they have enough content to extend past the container, they will, whether you want them to or not. I just tried what you suggested and declared a float:left for both and now neither of them are contained within the boundries of the container.
  3. Can someone explain to me why if I have two divs inside a container div, and I try to declare a float property for one of the inner divs, Firefox suddenly thinks the inner div with float declared should extend outside the container div if the inner div has enough content to do so? This doesn't happen in IE and it drives me crazy. What I want is a container div with two inner divs, one inner div on the left followed DIRECTLY by another on the right. How do I do this without using float since Firefox is being retarded about it?
  4. Wow, that worked fantastically. Thanks for the help, it's greatly appreciated.
  5. Thanks! I'll give that a shot.
  6. I've scoured the w3schools site for an answer, and I haven't found one for this question: If you change an element's properties with HTML DOM, is it possible to change its properties back to the default? For instance, in the following example, I'm trying to add some dynamics to links by altering the background and border properties, so when a user clicks one link the background/border properties change. But, when the user clicks a different link, I want the other links to default back to their original properties. Does this make sense? Right now, I've tried adding more code to resemble the original CSS properties for "a", but it negates the hover properties. I'm getting quite frustrated. If there is a way to just reset an element to its original setting, this would be monumentally simpler. Here is the 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=iso-8859-1" /><script type="text/javascript"><!--function resetFontSize() { document.getElementById("text").style.fontSize="10px"; document.getElementById("nav01").blur(); document.getElementById("nav01").style.border="1px inset #666666"; document.getElementById("nav01").style.background="dodgerblue"; document.getElementById("nav02").style.border="1px inset transparent"; document.getElementById("nav02").style.background="#666666"; document.getElementById("nav03").style.border="1px inset transparent"; document.getElementById("nav03").style.background="#666666"; }function setFontSmaller() { document.getElementById("text").style.fontSize="9px"; document.getElementById("nav02").blur(); document.getElementById("nav02").style.border="1px inset #666666"; document.getElementById("nav02").style.background="dodgerblue"; document.getElementById("nav01").style.border="1px inset transparent"; document.getElementById("nav01").style.background="#666666"; document.getElementById("nav03").style.border="1px inset transparent"; document.getElementById("nav03").style.background="#666666"; }function setFontLarger() { document.getElementById("text").style.fontSize="14px"; document.getElementById("nav03").blur(); document.getElementById("nav03").style.border="1px inset #666666"; document.getElementById("nav03").style.background="dodgerblue"; document.getElementById("nav01").style.border="1px inset transparent"; document.getElementById("nav01").style.background="#666666"; document.getElementById("nav02").style.border="1px inset transparent"; document.getElementById("nav02").style.background="#666666"; }//--></script><style type="text/css"><!--body { background-color:#000000; font:10px verdana, arial; color:#ffffff; }div.container { width:50%; margin:0 auto; border:1px solid #666666; }div.navbar { height:20px; margin:0; background-color:#666666; border:1px solid #666666; }div.text { height:75px; padding:10px; border:1px solid #666666; overflow:auto; }ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; }li { display:inline }a.navbar:link, a.navbar:visited { float:left; font:12px verdana, arial; text-decoration:none; color:black; background-color:#666666; padding:2px 9px 2px 8px; border:1px inset transparent; }a.navbar:hover { float:left; font:12px verdana, arial; text-decoration:none; color:white; background-color:#666666; padding:2px 9px 2px 8px; border:1px outset #666666; }a.navbar:active { float:left; font:12px verdana, arial; text-decoration:none; color:black; background-color:#666666; padding:2px 9px 2px 8px; border:1px inset transparent; }--></style><title>font-sizer</title></head><body><div class="container"><div class="navbar"><ul id="navbar"><li><a href="#" class="navbar" id="nav01" onclick="resetFontSize()">Reset font</a></li><li><a href="#" class="navbar" id="nav02" onclick="setFontSmaller()">Smaller font</a></li><li><a href="#" class="navbar" id="nav03" onclick="setFontLarger()">Larger Font</a></li></ul></div><div class="text"><p id="text">Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.</p></div></div></body></html>
  7. I have tried using the :hover pseudo-class for li elements to give a bit of dynamics to rollovers for links. Basically I use something like this (although I would probably use some sort of image, i.e. an arrow, instead of the basic item marker): <html><head><style type="text/css">body{font:10pt verdana;color:black;}ul {list-style-type:none;}li:hover {list-style-type:disc;}a:link, a:visited{text-decoration:none;color:dodgerblue;}a:hover{text-decoration:none;color:gray;}a:active{text-decoration:none;color:dodgerblue;}</style></head><body><ul><li><a href="#">Link #1</a></li></ul></body></html> This works fantastically in Firefox, but IE refuses to show the item marker on hover. Does anyone know why? According to w3schools, the :hover pseudo-class is supported all the way back to IE4. Does the :hover pseudo-class only work for anchors in IE? Thanks in advance for any answers regarding this.Well, nevermind, I guess. I added the XHTML transitional DTD to the code and it seemed to correct the problem.
×
×
  • Create New...