CSS - Problem Displaying Proper Menus In I.e 6

Ok

I managed to fix my problem with firefox...

Now I am having a MAJOR problem with IE7.

I am creating a shopping page, and none of my lists are displaying correctly in IE7

I have spent hours and hour and hour and hours looking for hacks and fixes and I can not find any reason why.

I have a shopping menu to the left side of my main content... and it displays off to the side, very very beautifully, in EVERY browser except IE 7... even thought it displays in the right spot in IE6!!!
In IE 7, the shopping menu displays INSIDE the main content, not to the LEFT of the Main, like it does in EVERY other browser


I NEED to get this off to my client VERY soon, and I am out of ideas of what is causing this. I DONT want to have to redesign my entire page just to accommodate one stupid browser, because i LOVE how it looks fits my clients japanese site...

Here is my CSS

#shopping-bracket{
width: 950px;
min-height: 200px;
margin:0 auto;
}


#shoppinglist {
width:100px;
height: 600px;
float: left;
position: fixed;
visibility: visible;
top:60px;}

#shoppinglist li {
float: right;
list-style: none;
background-image: url(images/shoppingmenu-bgsmall.gif);
width: 100px;
min-height: 10px; }

#main {background-color: #ffffff;
margin: 0px auto;
top: 81px;
width: 732px;
min-height:600px;
}


my page is here http : // www pinktanpopodesigns com / babyconcept3 / shopping . html

please please please, I really need to get this fixed...

thank you for your help

Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/

I want example this (for how): what do i do?

CSS:

Code:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

Code:

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

Code:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

My friend has been working with a charity, and apparently their website is outdated.

I have decided to attempt giving them a new look but already find myself having some CSS issues.

In FireFox things are looking good so far, but not in IE.

I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this?

Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL:

http:// thomasjadams.co.uk / charity

Hi there.

I've got two styles defined for links...one of which is
Code:

A:link#redir { 	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #C90016;
	text-decoration:none;
 }
A:visited#redir { 	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #C90016;
	text-decoration:none;
 }

A:hover#redir {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #C90016;
	text-decoration:none;
	display:inline;
	} 

when i want the link to be the 'redir' style, i put
Code:

<a href="http://www.whatever.com" id="redir">clicky</a>

but that won't validate because id's are supposed to be unique.

what's the deal?

thanks!

My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not.

This is the .css code for the logo div:

#logo {
float: left;
margin-left:1px;
width: 200px;
background:url(../images/mm-logo.jpg) no-repeat;
height:50px;}


Any ideas or suggestions?

I have recently begun training on CSS. I would say I am pretty skilled with the basics of creating a layout. I can pretty much do any layout, 3 column, 2 column, or whatever. The way I have been doing this is though is to specify the width using pixels of each <div> area. I have also been specifying the margins: and padding: using the exact pixels as well.

I know this way does not cause the website to resize when I resize my browser.

I also know that in order to cause it to resize I need to use %'s and such. Is there an advantage to this besides the obvious resizing ability. What do you guys all do?


And is the best way to do a layout to use the <div> and then set up my scripts to display in the content <div> area each time?


Thanks.

Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!!

My probably terrible code is as follows:
Code:

<table>
  <tr>
    <td valign="middle">
	<a href="/home"><img src="logo.jpg"></a>
    </td>

    <td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
	<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">

	<select name="FTS"> <!-- FTS = File Type Selections -->

	<option value ="File_Type">File Type</option>

	</select>
	<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
    </td>
    <td nowrap>&nbsp;&nbsp;<a href=/advanced_search.phpf>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences.php>Preferences</a>
    </td>
  </tr>
</table>

ok i have this css:

Code:

#menu ul li {position: relative;}
#menu li ul {position: absolute; left:-34%; top:100%; display: none;  }
#menu li:hover ul, #menu li.over ul{ display: block;  background-color:#000000; width:150%;}

this works for menu & submenu, however i copied it and tried to use it for sub-sub menu with NO LUCK.
Code:

#menu li ul li ul, #menu li ul li ul li  {position:fixed;display:none; left:150em; top:0em; width:100%; }
#menu li ul li:hover ul,  #menu li ul li.over ul {display:block; }

i did try something and got the sub-sub menu to "work" but when i hovered over the main menu, both sub, sub-sub menu were showing instead of just the sub menu showing. (obv i wanted to show sub-sub menu only when the person hover over the li containing the subsub menu) sorry if it is confusing.

Thanks for reading my question.

I went to http://jigsaw.w3.org/css-validator/ to see how I was doing on my CSS.

Seems I'm doing ok.

I am just having problem with the Scrollbar portion.

What is the proper way of doing this?

Here is my result from the validation

Quote:
Errors
URI : file://localhost/kelly.css

* Line: 0 Context : #info

Property scrollbar-face-color doesn't exist : #ffac11
* Line: 0 Context : #info

Property scrollbar-highlight-color doesn't exist : #ffac11
* Line: 0 Context : #info

Property scrollbar-shadow-color doesn't exist : #d4940e
* Line: 0 Context : #info

Property scrollbar-arrow-color doesn't exist : #b12514



http://www.websitedev.de/css/validator-faq says a bit about it.

Just wondering if Any of the scrollbar stuff is allowed, and will be validated?

Thanks,

Brad

Hello all. May I ask for your help? I just finished developing a site for personal page (e.g. blog, myspace, etc) promotion, but I'm having troubles correcting my stylesheet. The home page is basically a bunch of pictures of people, but I don't have anyone loaded in the system yet, so I can't get a feel for whether or not it is behaving properly. This probably sounds like SPAM, but oh well. Would anyone be willing to give it a try and provide your thoughts in this post? The web address is http://www.klik.us.

Thanks a ton for any help/comments.

alright I have a css/folder in root directory. I have files in child directories, I'm calling the parent file by ../folderlocation/file to use my css but my images wont load that are in that css... The files in root directory show images that use exact same css.. only difference is those files are in root, and the one in child directories wont show images. The layout is shown though, any suggestions or tips would be greatly appreciated.

hi,

is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so.
Code:

a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}

a.big {font-weight:bold;}

thank you

CSS Definition:

span.votelinks {
right: 0;
position: absolute;
padding: 1px 280px 0 0;
background: none;
font-size: 12px;
font-weight: bold;
}

Its use in a .tag file:

<span class="votelinks">
<a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img
border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a>
( ${requestScope.UP_VOTES} )
<a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img
border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a>
( ${requestScope.DOWN_VOTES} )
</span>

The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text?

Thanks in advance,
Mark

Prior to doing any serious mobile work, I learned if you had an image that was mostly decorative and didn't need to be read as part of the content, you used a background image.

In today's world you have to support many mobile devices. There's a nice trick with <img> tags where you give them a max-width of 100%, and they will scale down proportionately on mobile devices.

As far as I can tell, there isn't quite as good of a solution for background-images.

Say I have a background image in a div, and I set the dimensions to match the background size - 600 x 300. To allow it to scale down on mobile devices, I set a max-width of 100%. But that doesn't scale the background image down, just crops it.

So I set background-size: contain, which makes the background scale, but the div is still 300px tall. And that's where I run into the problem. How do I tell the div to only be as tall as its background?

Am I missing something?

There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop.

temporary site <--- fixed. in a state of constant change.

The css is layout.css .

I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies).

I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up.