CSS - "slider" Went Missing After Image Edits.. Not Quite Sure What Went Wrong

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi there,

I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in).

I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds?

So for example...

before
Code:

<img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" />

after
Code:

.thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}

<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>

Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts

Hi, not sure if it is possible but i thought it may be possible in CSS...

I was wondering:

* I have a shopping cart (using JS)
* A CSS based Navigation which is "View Shopping Cart"
* An form button called "Add to cart"

** I want the CSS based Nav, to be hidden, until the user clicks on the form button, then it is visible, so that the user can click on it...

Anyone know how this is done???

Cheers

Jackson

Okay, I'm sort of learning as I go here. I had thought I would use a locker as the background, but then I decided to try learning how to do a liquid design (and positioning, oooo) and that kind of screwed me up because now I don't know how to do the locker sides (gap between door and frame like at top).

In a fixed width, I'd put a bg graphic that spanned #container, but in a flexible width design...I'm confused. Do I have to do some stretchy hijinks (layered divs w/bg images) like I did w/the top? That would be very confusing, if so...

This is the first of many questions to come, I'm sure. The horribly pedestrian design is at http://www.describe.org/projects/describe/

Hi, I have sort of a strange problem.

I'm making a centered website, and I have a shopping cart image which is actually a submit button for a form. If I make it just a plain image it looks like this:

http://www.rit.edu/~jtn5684/test/index1.html

However, when it's an <input type="image"> (which is what I need) it moves it drastically.

http://www.rit.edu/~jtn5684/test/index2.html

My styles are he http://www.rit.edu/~jtn5684/test/styles.css

Any idea how to make index2 look like index1 while using <input type="image">? Thanks!

Jon

I have a map on an html page.

If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.)

You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS.

I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything.

I thought it was a problem with the z-index, but nothing happens when I change the numbers.

What am I doing wrong?

Gayle


CSS code:

PHP Code:
#imap {
    display: block;
    width: 801px;
    height: 677px;
    background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat;
    position: relative;
    /*margin : 0 auto 2em auto; */
margin: 0 0;
    background-image: url(Images/RiverBasinMap_DENR.jpg);
} 

#imap a { 
color: #000; 
font-family: arial, sans-serif; 
font-size: 1.2em; 
font-weight: bold; 
text-transform: uppercase; 
} 
a#title, a#title:visited { 
display: block; 
width: 801px; 
height: 0; 
padding-top : 260px; 
position : absolute; 
left: 0; 
top: 0; 
cursor: default; 
text-decoration: none; 
} 
* html a#title { 
height: 677px; 
height: 0; 
} 
#imap a#title:hover { 
background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; 
overflow: visible; 
color: #c00; 
z-index: 10;
} 

/*BROAD*/

a#broad {
    display:block;
    width:141px;
    height:159px;
/*padding-top : 120px;*/
    overflow:hidden;
    position: absolute;
    left: 285px;
    top: 295px;
    overflow: hidden;
} 

* html a#broad { 
    height: 159px; 
    height: 0; 
} 

a#broad:hover { 
    background: transparent url(images/Broad_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 21;
}

/*SAVANNAH*/

a#savannah {
    display: block;
    width: 181px;
    height: 313px;
/*<!--    padding-top : 120px;-->*/
    overflow: hidden;
    position: absolute;
    left: 226px;
    top: 318px;
    overflow: hidden;
} 

* html a#savannah  { 
    height: 313px; 
    height: 0; 
}

a#savannah:hover { 
    background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 20;
} 






HTML code:

PHP Code:
<body>
<dl id="imap" name="imap">
    <dt><a id="map" href="#nogo">Test Map</a></dt>
        <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd>
        <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd>
</dl>
</body> 

I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here.

I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help.

I have read about everything I could and still cannot find my answer.

Is there a way to get rid of the box around my image using CSS?

Here is what I have:

<input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" >

Thank you for your help.

Hi, I have tried my hand at creating a box to set a fake image map over a background image, without luck. (But, I'm a total dork using css. Absolute beginner.)

I have been trying the instructions he http://www.position-relative.com/tutorials/tute1_css_bg_image.php

However, my background image is set into the body css spec, though I have only tag styles + the body's background image set using css. The rest of my page is tables, so I am wondering if I need to set the background image [for my whole page] using the .box1 spec shown on the tutorial at the link above?

And if not, I don't know where / how to use the "#box-link {" noted in this tutorial. Or, if there is a different way to set the links on my css body spec'd background image... ?

My background image css spec:
Code:

body {background-image:url("images/Header.jpg");
	background-repeat:no-repeat;
	background-position:top;
	}

I am following the layout described in A List Apart's In Search of the Holy Grail layout article. The layout itself is working in FF3, IE7, and IE6. But I deviate from the article in a couple of points.

The equal column heights are not too important to me. Instead, I am employing a faux-column technique to have #left #center and #right all appear to stretch to the bottom of the page. This is how my HTML is setup.

Code:

<body>
  <div id="page">
    <div id="header">
    <div class="layoutContainer">
      <div id="primaryContent" class="column">
      <div id="leftBar" class="column">
      <div id="rightBar" class="column">
    <div id="footer">

The left faux-column and center background image is specified in my "page" div. I align the BG image to the top left. This works great! My right faux-column background image is specified in the "layoutContainer" div. Aligned to the right, this works well in FF3, works with some weird kinks in IE7, and does not work at all in IE6. IE7 cuts off some of the background-image for some reason, making it appear more to the right than the end of the actual page. IE6, however, does not display the background-image for #layoutContainer at all. I have tried many fixes but haven't gotten anywhere so far.

Here is my CSS:
Code:

#page{
	font-size:1.1em;
	background:#fff url(../images/common/page-bg.gif) top left repeat-y;
}
#header{
	background:url(../images/common/header-darkBlue.jpg) top right repeat-x;
	overflow:hidden;
	clear:both;
}
.layoutContainer{
	overflow:hidden;
	padding-left:210px;
	padding-right:251px;
	background:url(../images/common/secondaryContent-bg.gif) repeat-y top right;
}
#primaryContent {
	padding:10px 15px 0 20px;
	width:100%;
}
#leftBar{
	margin-left:-100%;
	width:210px;
	padding:0;			
	right:245px;		/* leftBar fullwidth + primaryContent padding */
}
#rightBar{
	width:204px;
	padding-left:12px;
	margin-right:-251px;	/* rightBar fullwidth + primaryContent padding */
}
#footer{
	clear:both;
}
.column{
	position:relative;
	float:left;
}

IE6 CSS:
Code:

#leftBar{
	left:216px;
}

IE7 CSS:
Code:

.layoutContainer{
        background-position:96.5% 0;
}

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

My issue is the area around the image. It's the background color so i'm pretty sure it's not a border, I tried messing around with margins. Bottom line, I want my image (header panel) to be flush with the top and sides of the browser!



Here's my code:

<html>
<head>
<style type="text/css">
body {
background-color: #282627;
font-family: sans-serif;
}

img.hdr {
height: 53px;
width: 100%;
}
</style>
</head>


<body>

<img src="HeaderImage.gif" class=hdr>

</body>

</html>


Just starting out so I appreciate it!

Greetings, and thank you for your help.
I have a css which spec's a background image in the styles.css:
#mainmenu {
clear:both;
padding-bottom:5px;
margin-top:22px;
margin-left:18px;
margin-right:24px;
background-image: url(images/mainmenubg.jpg);
background-repeat: no-repeat;
background-position:right top;
text-align:left;
}
I am working in drupal. The image mainmenubg.jpg serves as the background for the site. My question is, is there any method (script or whatever) to have different images serve as the background so that as the user clicks thru the site, a different background appears. I realize that if I do this in static html, it would be fairly easy but this is one of the inflexibilities of drupal. Any help would be appreciated.

Thanks!
Pradhan