CSS - Image Jquery Slideshow Container Div Doesn't Appear As It Should In Ie
Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue...
Thanx in advance Similar TutorialsI am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's. I would appreciate any help at getting the results I desire. Thanks. Here is the basic html I am working with. Code: <!DOCTYPE html> <html> <head> <style media="screen" type="text/css"> #content { margin:0px; padding:0px; background-color:#90C0FF; } #cbox1 { border-radius:15px; border: 2px solid #000000; width:250px; background-color:#FFFFFF; padding:20px; float:left; } #cbox2 { border-radius:15px; border: 2px solid #000000; width:200px; background-color:#FFFFFF; padding:20px; margin-left:10px; float:left; } </style> </head> <body> <div id="content"> <h2>LOREM IPSUM:</h2> <div id="cbox1"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC </div> <div id="cbox2"> But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </div> </div> </body> </html> You can pop this right into try it: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. Hi, I'm trying to position an image in the bottom right of a containing block, but the only way I can get to align perfect all the time, is by using "background-image: url('image.jpg')" attribute. This would be perfect, except I need the image to be a hyperlink. I have a test page up here and the css is here. That's how I want it to look, but can't get the "check me out" image to display in that spot without using the background property. I've tried using a class attribute in an img tag and setting up the css with a position relative, tried removing the p tags, various floats and positions, and a bunch of other things. No matter what I try, the image won't stay in that one spot. Any ideas? Hello, i'm trying to make a tableless image gallery, each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side) while the div container expands fine, the span container does not expand to fit the image, and i also don't know how to vertically center it. i can't use <div> because images can be in the same row. Code: body { margin:0px padding:10px; background-color: #ffffff } body, div,span { font-family: Arial; font-size: 12px; color: #000000 } a { color:#000099 } a:hover { color:#0000ff } div.paging { padding:10px; border:1px solid red; } div.paging span { padding-left:10px; border:1px solid red } div.gallery { padding:10px; border:1px solid red } div.gallery span { margin:20px; border:1px solid green; } div.gallery img { border:1px solid black } this is the result http://addf.net/tests/m_g/gallery.php is float the only option? must i float every element on the page? what if it's a module for another not floated website? i'd rather not use float or a table. if you could help thank you Hi all I'm building a photo gallery and have a problem. The main images have what looks like a dotted container box surrounding them when you click them. This box has padding either side which I want to either reduce to the size of the image or eliminate all together but don't know how to do this. The link is below. Click a thumbnail then click the larger image to see the dotted line. Thanks for any help. bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code: <body> <div class="colorbox"> <div class="colorboxtop"> <h2>title goes here</h2> </div><!-- /colorboxtop --> <div class="boxcontent"> <p>You should read this and <a href="#">Click Here</a>.</p> <a title="Go Here!" href="#">[button]</a> </div><!-- /boxcontent --> </div><!-- /colorbox --> </body> No great complexity there...here's the CSS: Code: body { color:#666666; font-family:Lucida Grande,Verdana,sans; font-size:10px; font-size-adjust:none; font-style:normal; font-variant:normal; font-weight:normal; line-height:13px; } .colorbox { margin-bottom:9px; padding-bottom:15px; width:300px; border:thin solid #CCCCCC; } .colorbox h2 { color:#FFCC33; } .colorbox { color:#CC6633; padding:0px 20px 15px; margin-top:0; margin-bottom:10px; } .colorboxtop { background-color: #dddddd; height:50px; color:#666666; background-image: url(images/bg_Tiles/stripe-dk-blue-green.png); padding:auto 20px; } .colorbox a { color:#C5DBE9; font-weight:bold; text-decoration:none; } I am wanting to display an image as a background. However that isn't working for me. So can someone please help me solve this problem? Thanks in advance. This is the css code that I am working with: Code: body { background-image: url(cattle_bg.jpg); background-attachment: fixed; background-repeat: no-repeat; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; } This is the link for that css code which is the htm file: Code: <link href="/images/styles.css" rel="stylesheet" type="text/css" /> CSS: Code: .news { background-color:#eaeaea; border: solid 1px #999; width: 500px; margin-top: 10px; } .news img { float: left; padding: 10px 0 10px 10px; } .news p { float: right; width: 350px; margin: 0; padding: 10px 10px 10px 0; } HTML: Code: <div class="news"> <img src="http://album-images.lala.com/servlet/ArtWorkServlet/432627039265781052/l" width="120" height="180" /> <p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p> </div> Logically, a grey box should wrap around it. Can anyone explain to a CSS newbie why this doesn't work? I got this WP style, and I edited it quite a bit. Code: #menu { clear: right; float: left; position: relative; padding:0 10px 0 10px; margin:0 0 0 34px; width: 160px; /* border-left: 1px solid #bbaf95; border-right: 1px solid #bbaf95; */ background: #fff rl(wp-images/bg.png) repeat-y 100% 0; } The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. HI, Here is my problem : I have an image which I want to use as a link. I put it between the <a></a> tags. I have define a CSS for it : Code: a.toto:link { color: #474747;} a.toto:visited { color: #474747;} a.toto:hover { color: #00BAFF;} In IE 6, the image show up with a border of different colour than listed above and when I move the pointer over it, this border doesn't change colour as a text-link does. In FF, all work pretty well as I wanted. See example on www.steax.com (hope it's work, my server doesn't feel good these days) Thx Hi! I have a css file (validated) which contains: Code: TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); } this works properly with Opera 7.54, Mozilla, but it doesn't work with MSIE! Only in MSIE I can't see the background image. Does anybody knows what may be wrong? MSIE version: 6.0.2600.0000 Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it. I hate css http://www.mgan.net/work/10-06-04/layout1.html There is the link, I have my styles in the header section of the html file. I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code: <table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0"> ... This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. Hello, I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin. here's the website thus far: www.beaucoupla.com this is my first time writing code so please any help would be appreciated! Code: @charset "utf-8"; /* CSS Document */ #mainWrapper { /* background:#000 right top no-repeat; min-width:1000px; min-height:775px; border:0px; background-color:#000; */ padding: 0 0 0 1px; margin:0; top:0; left:0; width:100%; } .mainbar { position:absolute; top:0px; left:0px; display:none; visibility:hidden; width:78%; min-height:100%; height:auto; /*This works for IE7 min-height:775px; height:775px;*/ border-right: #FFF solid medium; } #imagelist { left:0; position:absolute; display:block; visibility:visible; /* width:auto; static size */ } #imagelist img { display:block; } #imagelist img.first { display:block; } .theimage { position:absolute; left:0; width:100%; /* Adding this works for IE7 */ /* height:775px; */ border-right: solid #FFF medium; } #podcast { /*right:303px; */ position:absolute; top:0px; left:0px; height:100%; } .about_info p { font-size:1.1em; } .contact_info, .about_info, .news_info { position:relative; margin-top:4em; margin-left:10%; width:78%; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.3em; color:#FFF; height:100%; } .contact_info #title, .about_info #title, .news_info #title { font-size:1.75em; padding-bottom:1.5em; color:#1ac089; color:#03c5d1; } .contact_info .heading { color:#c04141; font-size:1.2em; } .contact_info .mail { text-decoration:underline; } .contact_info a:hover { color:blue; text-decoration:underline; } .news_info .heading { color:#c04141; } body { /*width:1400px; height:775px;*/ padding:0; margin:0; border:0; background-color:#000; } #share td { padding-left:0.5em; } #share { margin-left:1.4em; margin-top:0; border-top:0; /* padding-top:5; */ font-size:0.65em; } .sidebar { position:relative; font-family:Arial, Helvetica, sans-serif; font-weight:bold; margin-left:78%; margin-top:1em; font-size:2em; color:#FFF; } ul { border:0; margin:2px; text-decoration:none; } li { list-style:none; } a { text-decoration:none; color:#FFF; } a.home:hover { color:#bc7bd4; } a.news:hover { color:#7bd488 } a.podcast:hover { color:#d47b88; } a.blog:hover { color:#d4cb7b; } a.about:hover { color:#7bd4c6; } a.contact:hover { color:#d4a37b; } a.twitter:hover { color:#33ccff; } a.myspace:hover { color:#999; } a.facebook:hover { color:#5b61d5; } I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy. When I have: body { background: url('resources/assets/background.jpg') no-repeat bottom left; } in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results. Does this just not work from an external css, or am I missing something? Thanks y'all. Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? |