CSS - ???? What Is The Most Active Forum W/ A Huge Community For Web Dev Talk ????

Hi,

Sorry to keep posting questions here! THe transition from tables to CSS has been arduous so far.

This page has a huge gap in the center in Firefox - looks fine in IE. I figure it's caused by the #rightnav and the right float. I just can't figure out how to fix it.

I can keep it open by throwing in a load of <p>&nbsp</p>, but that defeats the purpose

I'm starting to think I should throw in the towel and go back to tables!!!

check this page

Cheers

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
I believe the issue stems from the ids used only for the purpose of mootools.
Here's an html exerpt from the frontpage:
Code:

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

...

and the titre_toggle.css describing the elements used.
Code:

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

I'll appreciate any insight.

safari 4.0.3 --> KO
IE 6+ --> OK
FF 3.5 --> OK
mootools 1.2.4
joomla 1.5.15

I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded.

Here's my css for the navbar:

/* Navbar */
#nav { width: 158px;
margin-left: 0;
}
#nav ul { font-family: "Trebuchet MS", serif;
font-size: 11px;
margin-left: 0px;
list-style-type: none;
}
#nav ul li ul { margin-left: 12px; }

Any suggestions or help would be appreciated.

i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too...

it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden...

here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug...

Mini Catalog

Hey there,

webbsdomain.com/Max

I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there....

The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight.

In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find.

I researched the issue online and found similar issues:

IE6 3px float bug

and

IE6 double margin bug

Neither of which seem to be the issue, and the fixes they describe do not work.

I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful!

Thanks in advance,
Brian

Hi guys,

I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout.

I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following:

Code:

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
	background-color: #000000;
	}

Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know!

I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed.

Thanks everyone!

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

Can someone please help me?

I am trying to get my left side column to meet my footer image... just like on this website:

newcastlegateshead.com

See how they side bar goes all the way down and meets the footer?

Mine has a one inch gap between the bottom of the column and the footer.

Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss

Thank you so much...

I have menu that uses its own CSS and I am having some problems with the a:active. I have accomplished changing the font color but have been unable to change the background color of the cell. See the code below....
Any help is greatly appreciated!
By the way, the active link has to be used as a div. I am using a specialized menu with specific requirements :S
The background command below only colors the background of the text but in the OVER css, it colors the background of the CELL....

Code:

 #dm_t-active_link {
                font-weight: 900;
	color: gold;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
                padding: 0px;
	background-color: #440000;
                width:125px;
	border : 0px solid black;
}
.dm_t-0_over {
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 4px;
	color: #BC8D31;
	background-color: #550000;
	border : 1px solid black;
	height: 16px;
                cursor: hand;
}

Hi,
I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored.

Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized.

I have pasted my CSS below:

#waita, #waitb {
text-decoration:none;
color:#FFFFC0;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#000000;
layer-background-color:#000000;
font:bold;
font-weight:bold;
font-family:arial;
font-size:14px;
height:22px;
width:230px;
z-index: 100;
margin: 5;
}

.image
{
border-width: 2;
border-color: #000000;
border-style: solid;
margin: 10;
}

.class1 a:link
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:active
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:visited
{
text-decoration:none;
color:#000000;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#FFFFC0;
layer-background-color:#FFFFC0;
font:none;
font-weight:none;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

.class1 a:hover
{
text-decoration:none;
color:#FFFFC0;
border-style:solid;
border-color: #000000;
border-width:2px;
background-color:#000000;
layer-background-color:#000000;
font:bold;
font-weight:bold;
font-family:arial;
font-size:14px;
line-height:18px;
width: 229px;
z-index: 20;
margin: 5;
}

I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing.

Cheers, Andy

I have a navigation bar similar to the one on this site. I want whatever current button that is clicked on to be a different color just like the site I linked.

I thought this was done using the a:active tag but it doesn't seem to be working. It quickly changes back to whatever the default a tag specifies.

Is there a trick to this?

Thanks in advance.

is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on.

i hope that makes sense

Hey everyone,

I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts?

Hi All.

I am just trying to figure out how to make the bottom
border of the active tab disappear so it looks like the
active tab is part of the active panel.

For example:

http://wiki.modxcms.com/images/a/aa/Tabs3.png

THE CSS

Code:

<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
 
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
 
#tabs #nav ul li:hover {
background-color: #ffffff;
}
 
#tabs #data {
margin-top: 3px;
}
 
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
 
#tabs #data div.active {
display: block;
}
</style>

THE javascript:

Code:

 <script type="text/javascript" language="javascript">
        function navAllInactive() {
              oNav = document.getElementById('nav');
              oLis = oNav.getElementsByTagName('LI');
       
                for (i = 0; i < oLis.length; i++) {
                    oLis[i].className = '';
                }
        }
       
      function hideAllData() {
        oData = document.getElementById('data');
        oDivs = oData.getElementsByTagName('DIV');
       
        for (i = 0; i < oDivs.length; i++) {
            oDivs[i].style.display = 'none';
        }
      }
       
      function doShow(o, pageId) {
        hideAllData();
        navAllInactive();
        o.className = 'active';
        oData = document.getElementById(pageId);
        oData.style.display = 'block';
        return false;
      }
  
      </script>

THE HTML:

Code:

<div id="tabs">
<div id="nav">
<ul>
<li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li>
<li onclick="javascript:doShow(this, 'added');">Date Added</li>
<li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li>
<li onclick="javascript:doShow(this, 'rating');">Rating</li>
</ul>
</div>
<div id="data">
<div id="relevance" class="active">Relevance</div>
<div id="added">Date Added</div>
<div id="recorded">Date Recorded</div>
<div id="rating">Rating</div>
</div>
</div>