|
CSS - Incorrect Css When Displaying Images In Ebay
Hi,
I don't know what is wrong with my CSS. I created an ads in eBay with few photos. The thumb images should be aligned properly, but currently is not. I have used firebug to check its css structure, but I can't find anything unusual. Any suggestion would be very appreciated. Thanks Similar TutorialsTest Site I'm working on a new design, and it works in Firefox and Safari no problems - and in IE it works mostly with the exception of one thing. None of the background images load. I've tried in 5.5, 6, and 7 and in all 3 nothing loads. How can it load the backgrounds in FF but not in IE. Am I doing something wrong here? Does IE not support: background: #000 url("someimage.jpg") no-repeat; ??? Hi all. I've tried searching the net but every solution either isn't applicable or doesn't work. My problem is that all my CSS background images are not displaying at all in ie7. they are called in via link id. so: PHP Code: <a href="javascript:void(0)" id="cus" onClick="changeCus()"><img src="/images/space.gif" height="30" width="50" alt="" title="Customer Ratings" /></a> fairly simple stuff. the corresponding css is PHP Code: a#cus{background:url("../images/custM.png")no-repeat;left:-140px} I have treid changing the link as in ../../images... but that was dumb. Adding a background position. Adding display:inline. Adding display:block. Can anyone please aligten me as to why all my css images are failing. It works fine in FireFox. My doctype is set to strict. It is the correct path to the images. The images are on the server. Any help would be greatly apprcieated. Thanks in advance Jaza Hi All, Does anyone know how to display an image at an angle (for example 45 degrees)? TIA HywelC Hi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! I'm aware that there are several threads addressing the issue of image placement, but I'm unable to find anything referencing the specific issue I'm having, so I figured I'd ask... Let me first say that I am a professional martial arts instructor, not a web developer. What I do know how to do is completely self-taught. Bearing that in mind, I've discovered a relatively minor issue with our site, and I'm curious as to input here. Blue Mountain Martial Arts You will notice two "bamboo sprigs" in the upper right and left hand corners of the page. It took me quite awhile to get these to the actual edge of the browser window, but it seems that what I did was almost too effective. When viewing yahoo's cache of the page the bamboo is still in the upper corners of the browser window, rather than still lined up with other page elements. Google's cache for some reason places the left bamboo in the middle of the page. This is also an issue when the browser window starts "small", and is then maximized. The images in that case do not re-align, and thus will stay where they originally loaded, which may be in the middle of the page. I'd like prospective martial arts students looking at our studio to be drawn in, rather than driven out by a malfunctioning website. Most of the time, the site works fine, but I'd like to make that 100%. Input...? What should I change to have the images load on the edge of the screen, but reposition themselves relative to the other page elements if necessary? Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! hello i have managed to get a working menu where i want it and have managed to have a fixed header and footer. however, i have a problem when the main page scrolls the dropdown menu seems to scroll with it. instead of the dropdown being below the heading where it normally is, if i scroll the page the header and footer stay where they are but if i click the menu heading again, the dropdown is halfway down the page. i have attached css and the correct and incorrect screenshots to give you an idea if my outline is fuzzy. i would be grateful if someone could tell me where i am going wrong? i am only learning css and would be grateful for any advice. many thanks CSS CODE Code: padding: 0px;
font-family: Arial;
}
/* Don't touch */
ul#jmenu
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul#jmenu li
{
float: left;
margin: 0px;
padding: 0px;
//width: 1px; /* ie */
//vertical-align: bottom; /* ie */
}
ul#jmenu li a
{
display: block;
white-space: nowrap;
}
ul#jmenu li ul
{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
list-style: none;
zoom: 1; /* ie */
}
ul#jmenu li ul li
{
float: none;
}
/* Styling starts here */
ul#jmenu
{
margin-top:80px;
width: 100%;
height: 40px;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
ul#jmenu li
{
background: url('../images/separator.gif') no-repeat right center;
padding: 0px 10px;
}
ul#jmenu li a:link, ul#jmenu li a:visited
{
padding: 0px 10px;
height: 40px;
line-height: 40px;
color: #e4ecf6;
font-size: 13px;
text-decoration: none;
background: none;
}
ul#jmenu li a:hover
{
color: #ffffff;
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left bottom;
margin-top:0px;
}
ul#jmenu ul
{
background-color: #3f4a58;
border-left: 1px solid #7a8087;
}
ul#jmenu li ul li
{
padding: 0px;
background: url('../images/sub-separator.gif') repeat-x left bottom;
}
ul#jmenu li ul li a:link, ul#jmenu li ul li a:visited
{
;
min-width: 100px;
//width: 100px; /* ie */
font-size: 12px;
height: 30px;
line-height: 30px;
}
ul#jmenu li ul li a:hover
{
background: #3f4a58 url('../images/menu-bg.gif') repeat-x left top;
}
#header {
position:fixed;
width:100%;
left:0px;
top:0px;
height: 80px;
background: #808080 url(../../images/logo.jpg) no-repeat left center;
}
#logo {
/*background-image:url(../../images/logo.jpg) no-repeat left;*/
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#808080;
border-top:1px solid #333333;
}
.footertext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin:10px;
display:block;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
#main{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:100%;
margin-top:25px;
}
#main p {
margin-left:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
HTML CODE Code: <div id="header">
<ul id="jmenu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Requests</a>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li>
<a href="#">Item 2-3</a>
<ul>
<li><a href="#">Item 2-3-1</a></li>
<li>
<a href="#">Item 2-3-2</a>
<ul>
<li><a href="#">Item 2-3-2-1</a></li>
</ul>
</li>
<li><a href="#">Item 2-3-3</a></li>
</ul>
</li>
<li>
<a href="#">Item 2-4</a>
<ul>
<li><a href="#">Item 2-4-1</a></li>
<li><a href="#">Item 2-4-2</a></li>
<li><a href="#">Item 2-4-3</a></li>
</ul>
</li>
<li><a href="#">Item 2-5</a></li>
</ul>
</li>
<li><a href="#">Reports</a></li>
<li>
<a href="#">Control Panel</a>
<ul>
<li><a href="#">Item 4-1</a></li>
<li><a href="#">Item 4-2</a></li>
<li><a href="#">Item 4-3</a></li>
</ul>
</li>
<li>
<?php
echo $tNGs->getErrorMsg();
?><a href="<?php echo $logoutTransaction->getLogoutLink(); ?>">Logout</a></li>
</ul>
</div></div>
Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, I have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions. any ideas? Code: <div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;"> <h5>text is here</h5> </div> the style sheet Code: body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] Hi there, I have a css drop down menu system, but for some reason, it is only appearing in FF and not IE. This is my code: PHP Code: ul#nav li a:hover, ul#nav li:hover a, ul#nav li.sfhover a{ background:url(../images/nav.gif) no-repeat top center; } ul#nav li:hover li a, ul#nav li.sfhover li a{ background: none; } ul#nav li ul{ position: absolute; margin: 0px; padding: 0px; overflow: visible; left: 0px; display: none; margin-top: hover; text-align: left; border-bottom: solid 1px #a0b0c2; border-right: solid 1px #a0b0c2; border-left: solid 1px #a0b0c2; background: #f0f3f8; width: 150px; } ul#nav li li{ border-top: solid 1px #a0b0c2; background: #f0f3f8; padding: 0px; margin: 0px; float: none; display: block; text-align: left; width: 100%; } ul#nav li li a{ width: auto; display: block; margin: 0px; padding: 3px 0px 3px 20px; background: #f0f3f8; font-weight: normal; font-size: 9px; line-height: 12px; font-family: Arial, Helvetica, sans-serif; color: #677786; text-decoration: none; margin: 0px; letter-spacing: 1px; width: 130px; } ul#nav li li a:hover{ background: #c1c8d3; font-weight: normal; font-size: 9px; line-height: 12px; font-family: Arial, Helvetica, sans-serif; color: #677786; text-decoration: none; } ul#nav li:hover ul, ul#nav li.sfhover ul{ display: block; } Does anyone have any idea why this is not working in IE? Many thanks! I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out. Website is located at: myasvn.org/_/campusrec/temp.php PHP Code: /* Navigation Menu */ ul#menu { background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x; list-style-type: none; list-style-image: none; list-style-position: outside; width: 950px; height: 34px; display: block; line-height: 34px; z-index:2; } ul#menu li a { display: block; color: rgb(255, 255, 255); text-decoration: none; text-align: center; } ul#menu li a:hover, ul#menu li:hover { background-color: rgb(53, 60, 66); } ul#menu li { border-right: 1px solid rgb(53, 60, 66); float: left; } ul#menu li ul { position: absolute; left: -999em; background-color: rgb(238, 238, 238); width: 165px; list-style-type: none; list-style-image: none; list-style-position: outside; } ul#menu li li { border-right: medium none; width: 157px; float: left; line-height: 30px; } ul#menu li li a { border-bottom: 1px solid rgb(210, 210, 210); width: 157px; color: #000000; text-decoration: none; text-align: left; padding-left: 8px; display: block; } ul#menu li li a:hover { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); } ul#menu li:hover ul { left: auto; } ul#menu li:hover ul, #menu li.sfhover ul { left: auto; } I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone Please help. I have a page with a table just inside the body tag, which i dont want displayed. This is an ad table and i have no control over it because my free host puts it there. I have my own table inside a <div> tag, which I do want displayed. How can i set up my stylesheet to not display the table just inside the body tag but to do display the table inside the div tag? thanks |
|||||||