|
CSS - Internet Exploiter Wrapping Images Innaccurately
I've got an interesting problem with Internet Exploiter.
I have a navbar on the left side, and a large image next to it on the right. Now for most people viewing the page, there isn't any problems at all. If you use Mozilla, there's no issues, and usually nothing goofy in Internet Exploiter. But when you shrink the window size of IE, the large comic jpg 'wraps' down the page. If you take a glance at the source code at http://www.evilstudio.com and the css at http://www.evilstudio.com/main.css you can see that I've been using max-height to keep the image divs on the sidebar from covering each other up, and I'm using seperate divs to make them stack. Can't say if it's the best way to be doing that or not... I've tried quite a few things, such as making the comic absolute, floated, given it a min-width, (even though i know why that wouldn't help...) set it's text wrap to normal, you can see I've got an overflow-x on it right now, so it's reasonable to assume that i've done overflow and overflow ... Tried giving the comic a margin of 168 px... whatever I could scrounge up off of google and the O'Reilly book I had to return to the library... I'll probably be checking this thread periodically for the next few hours so if there's any questions, I'd be more than happy to pass out answers like cake at a party. Similar TutorialsThere are very few things which are just impossible to do using HTML and CSS, but I'm wondering if I've finally hit something that is. First, some background: I'm trying to do some code for a wordpress image gallery on my blog. I have a plugin that allows me to code the gallery however I want, so that's not a problem. However, I'm redesigning my site, and I want to keep both galleries I have already posted and new galleries that I'm going to post to all look the same. The problem is this: the old galleries all have 2 images in a row, while the new ones will have 3 images in a row (and perhaps even 4 in some situations). All images in any given gallery will have the same heights and widths, but height and width of images between galleries can change. What I've been trying to accomplish is the following: A box, which creates a border around the entire gallery. Images stack horizontally as wide as they can go on the page, then drop down to the next line. As I said, sometimes this will be 2 and sometimes 3 images. However, the border should always be "skin tight" (give or take a few pixels of padding) around the gallery. I've tried just about every combination of tags, floating, and display options, and nothing seems to work. Either the containing element is either full width of it's container (if container is display block or inline-block with no width) constrains the widths of the images (if it does have a width), or the box doesn't fully contain the top row of images (if the container is display inline with non-floated content). I can usually either get the right width, but not the right height, or the right height, but not the right width. Getting both the right height and width appear to be the problem. As of right now, my code for the gallery looks something like the following (it is ever changing, so it's kind of pointless to post what it is at this exact moment): Code: <div class="outer"> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> <span class="inner"><a href="whatever"><img /></a></span> </div> However, I'm just running out of ideas, and I'm about ready to either say "screw the look of the old galleries" or use wordpress's built in options for how many rows there are (the problem with this is I have to set it for each gallery - something that I'm trying to avoid if possible, as resorting to that also presents issues with galleries I've already posted) This problem has been driving me crazy. Long story short, this is what it looks like in Firefox 3. This is the correct way it should look. (ff.jpg) This is the way it looks in both IEs (ie.jpg) The entire third <li> item wraps correctly in firefox, but in ie, the word within the <li> wrap, but not the entire <li> element. Here is the html: Code: <ul class="tabNavSecondary"> <li><a href="#preventionSub1">Prevention</a>|</li> <li><a href="#preventionSub2">xxxxxx</a>|</li> <li><a href="#preventionSub3">xxxxx</a>|</li> <li><a href="#preventionSub4">xxxx</a>|</li> <li><a href="#preventionSub5">xxxx</a>|</li> <li><a href="#preventionSub6">xxx</a></li> </ul> CSS: Code: .tabNavSecondary{
float:left;
margin:6px 0 15px -5px;
}
.tabNavSecondary li{
background:none;
display:block;
float:left;
margin:0;
padding:0;
}
.tabNavSecondary li a,
.tabNavSecondary li a:link{
float:left;
margin:0 5px;
color:#003399;
}
Any thoughts? I've tried for about an hour with all sorts of different styles. I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div See what I mean... Open this link in FF and then in IE Ahh, great, now it's putting the gutter there in IE regardless. Great. Here's the CSS I'm using: Code:
body { font-family: tahoma; font-size: 12px; background: #fff; }
img { border: 0px; }
#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }
and here's the HTML (minus the CSS): 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page :: </title>
<style type="text/css" media="screen">
<!--Already included in snippet above /-->
</style>
<script type="text/javascript">
function roll(item, onOff) {
var targetDiv;
var targetText;
var showHide = onOff;
targetDiv = document.getElementById(item.id);
targetText = document.getElementById(item.id + "Text");
if (showHide == 1) {
targetDiv.className = "navSelected";
targetText.className = "navTextSelected";
} else if (showHide == 0) {
targetDiv.className = "nav";
targetText.className = "navText";
}
}
</script>
</head>
<body>
<div id="Container">
<div id="NavContainer">
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
</div>
<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>
</body>
</html>
Hope to god someone can explain what's going on before I go totally insane. Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link). Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden. I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done. Please be my CSS hero. I searched the forum and could not find a post with a similar issue, so I am creating this one. I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background. URL REMOVED I appreciate any help I can get with this - Cadet Palmer how i do that again? Hi, Does anyone know how to get text in a textarea to automatically wrap when the text input hits the right hand border of the textarea. It works fine in I.E. without any style rules or using the html tag 'wrap'. But in firefox the text just continues horizontally and a horizontal scroll bar appears at the bottom of the box when the text reaches the right-hand border. Read a solution somewhere, sometime ago but can't remember where. Tried so far: [1] css overflow rule [2] HTML 'wrap' attribute [3] css white-space rule solution must validate CSS. thanx in advanz My menu keeps wrapping when the browser window is resized... How do I prevent this? Here is my code: index.php 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sphinx Gaming Inc. -::- Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript">
var blanking_flag = true;
function search_remvalue(method)
{
if (blanking_flag === true && method == 'focus')
{
document.search_frm.query.value = "";
blanking_flag = false;
}
else if (method == 'focus' && document.search_frm.query.value == "Search...")
{
document.search_frm.query.value = "";
blanking_flag = false;
}
if (blanking_flag === false && document.search_frm.query.value == "" && method == 'blur')
{
document.search_frm.query.value = "Search...";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><h1><p>Sphinx Gaming Inc.</p></h1></a>
</div>
<div id="navigation">
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Partners</a></li>
</ul>
<form name="search_frm" action="" method="get">
<input type="text" size="30" name="query" value="Search..." onBlur="search_remvalue('blur')" onFocus="search_remvalue('focus')"/>
</form>
</div>
<div id="content">
<p>This is the main content</p>
</div>
<div id="footer">
<p> It is currently <?php echo date('l \t\h\e jS \of F Y h:i:s A'); ?><br/> </p> <br/>
<p class="bottom">Copyright Richard Carson, 2010. If you have any questions, comments or concerns, feel free to email me at rcarson@sphinxgaming.com</p>
</div> </div>
</body>
</html>
main.css Code: * { padding: 0; margin: 0; }
html,
body {
margin:0;
padding:0;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
white-space:nowrap;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-height:100%;
position: relative;
}
#content {
float: left;
color: #333;
background: #FFFFFF;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#header {
color: #555;
width: 100%;
float: left;
height: 75px;
background: #000000;
}
#header h1 {
font-size: 50px;
}
#header p {
text-align: center;
}
#header a {
width: 99.9%;
height: 100%;
float: center;
text-align: center;
display: block;
text-decoration: none;
font-weight: normal;
}
#header a:link {
color: #999;
border: none;
}
#header a:visited {
color: #999;
border: none;
}
#header a:hover {
color: #999;
border: none;
}
#header a:active {
color: #999;
border: none;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
clear: both;
color: #999;
background: #333;
}
#footer p {
text-align: right;
margin: 3px;
padding: 1px;
vertical-align: top;
}
#footer p.bottom {
text-align: center;
font-size: 10px;
vertical-align: bottom;
}
#navigation {
float: left;
width: 100%;
padding: 0;
margin: 0;
height: 25px;
color: #999;
background: #333;
text-align: center;
}
#navigation ul
{
padding: 0;
margin: 0;
display:inline;
width: 100%;
}
#navigation li
{
float: left;
padding: 0;
margin: 0;
display:inline;
}
#navigation li a
{
height: 25px;
line-height: 25px;
float: left;
width: 120px;
padding: 0;
margin: 0;
display: block;
border-left: 0.1em solid #444;
border-right: 0.1em solid #444;
color: #999;
text-decoration: none;
text-align: center;
}
#navigation a:link {
color: #999;
}
#navigation a:visited {
color: #999;
}
#navigation a:hover {
color: #BBB;
}
#navigation a:active {
color: #FFFFFF;
}
Thanks in advance, Richard Carson Good afternoon, hoping you guys can help me with something that's been tasking me the last couple of days. Basically I have an image floated right inside a container div, and I wan't some divs to wrap around this on the left. I've done this bit. Inside each of the divs is a left floated number and a paragraph of text. I'm having trouble getting this not to wrap around the number without floating certain elements and breaking the rest of the layout. Here's a stripped down version of the page (sorry if the code is messy). Code: http://tomarcher.co.uk/upload/linkdump/test/single%20-%20Copy.php I look forward to your replies. Please can you take a look at my page http://www.doylecompanylaw.com/doyle.html The bottom div #basediv is all borked. I can't for the life of me figure out why. The main #outerdiv has a background image applied to it and it should all line up with the base div but its not displaying properly on Firefox or Opera. Any ideas? I just discovered this recently while trying to help out a friend. It happens in all browsers, so it must be part of the spec, but it's not the way I expected it to work. In the zip file below, there are basically three sections, the content, a colored box in the content, and a colored sidebar that the content wraps around. The thing is that the colored box text wraps to the sidebar, but the background extends the width of the page/parent element. The nutshell version of my question is -- is there a way to make the background wrap too? I want the colored content box to always be as wide as the plain text above it, and the page needs to be liquid, and it's causing me headaches. Thoughts? Hi, I have a problem that I'm trying to figure out. If I have a div such as the following: PHP Code: #Div1 { background: url(title.gif) no-repeat; position: absolute; top: 30px; left: 30px; width: 387px; height: 55px; .. which I want to be able to use absolute positioning to place within my page. My question is, is there a way to make it so that text will wrap around it (such as a regular aligned image) instead of the text appearing underneath it? I'm having trouble getting text to wrap within a DIV. In my purposely garish sample code below, what I want is for the image and the paragraph to appear side by side within the red DIV, with the paragraph wrapping onto multiple lines as necessary. What happens instead is that if the paragraph is too long to fit on one line beside the image, the blue DIV moves underneath the red one and the text remains on one line. Not what I want at all! Code: <!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>
<style type="text/css">
p {
margin: 0 0;
color: white;
}
#title {
background-color: red;
height: 105px;
}
#left {
float: left;
margin: 20px 20px;
background-color: yellow;
}
#right {
float: right;
margin: 20px 20px;
background-color: blue;
overflow: hidden;
}
</style>
</head><body>
<div id="title">
<div id="left">
<a href="index.htm"><img src="http://i52.tinypic.com/2u9l5z9.png" alt="" width="429px" height="65px" border="0" /></a>
</div>
<div id="right">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
</div>
</body></html>
If you shorten the paragraph you can see where I want the text to be displayed. It's only when it exceeds the available width within the red DIV that the whole blue DIV moves further down the page, where the text is suddenly quite happy to start wrapping. This can probably be solved with a single line of CSS but I've been trying all sorts with no joy. Can anyone please pinpoint what I need to do? Hello, i know this quest has been asked a few tims before as i did a search on it, but could not find an answer to help.. (though i may have missed it as i havet slepted in days) i have this setup on a page where i have a table of 4 imgs in the top right of the main table.. the text starts at the top left but dose not wrap under the images once its long enough and past the images.. (ill try and draw it for you here) .......== .......== ....... ....... ....... ....... ....... the . is my text the == is a image (/ is just a space), above is what its doing, what i need is for it to do this .......==/== .......==/== ............... ............... ............... thats what i need. i hope this shows what i mean :P any help would be great thanx. I set up my photo pages so that each photo is in its own "bin" div with a caption. Each bin has the same width but different heights due to different caption lengths. All of the bin divs are coded to float left, so they stack vertically when there is only enough screen width for one. When the screen is wide enough to accomodate more than one, the divs that are wrapped to the next line (so to speak) start below the tallest previous div which can leave a lot of empty space. I'm sorry if this is confusing, a perfect example of what I am talking about can be found here with a browser window over 1024px wide: http://www.bsuto.com/photoblog/2006/05/27/ And the css is he http://www.bsuto.com/internal/sheet.css Does anybody have an idea of how to eliminate the empty space? Thank you all so much. I have a box that I use for a container and then another box inside of that set to a width. When I put text into the inner box the text seems to go beyond what it should. Can anybody tell me what might be wrong with it. Code is as follows----\ Code:
.content_contain {/* This is the main container for the content, its width run 100% of the wrapper */
height: 575px;/* Gives it a height so that when the main_content block is empty it still holds a size. */
width:100%;
z-index:0;
}
.main_content {/* This is the main content, this will hold the left menu and right content */
height:100%;/* Height is set to 100% so that it will grow when the text goes beyound 550px of the main container */
width:750px;
margin:0px auto;
text-align:left;/* Have to use text-align:left becuase of the body text-align:center hack for IE */
position:relative;
background:white;
border:1px solid white;
z-index:5;
}
Thanks for any help that you guys can come up with... Stephen hey guys, need some help with css on mys site take a look at this using firefox http://home.no.net/kumar/test/earthtemplate_div.php3 http://home.no.net/kumar/test/skins/flyaway_yellow.css ie diplays the the container expanding to include the text, but ff (and maybe even mozillla) doesnt. anyone know how to get around this. i found a hack that i used to make sure that the container for the whole site wrapped around all shild elements but it is not working for the text. i have a left column, rightcoloum and the content div i the middle, all places using flaots, not absolute pos. also, the content div contains another div (content2), inside which the text is (this is oinly to get around widht issues in ie.) im suire that there is a way to get the contetnt or the content2 to wrap around the text...so any help is appreciated... thansk kumar I have a span that displays a message generated from ASP. The message is not wrapping like I expected it to. My CSS for the span looks like this, #message { padding:5px; font:bold 100% Arial, Verdana, Helvetica, sans-serif; border: 1px dashed #000000; } And my HTML looks like this, <span id="message">This is a sample message. This is a long message that will not wrap as one would expect.</span> When the message is long, the span wraps, but it overlaps the first line. I have tried adding float:left to it, but then it becomes so wide that scrollbars are displayed. I could add a width with the float, but if I do that then the short messages look funny when displayed (the border goes the whole width, and therefore there is whitespace to contend with). How can I make this wrap like would be expected (no overlap)? Thanks, Drew So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line. I'm somewhat new to CSS so I don't know what to do to fix it. -Johnny Here is the code: /* ---------- Primary Nav ---------- */ div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;} div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;} div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;} div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;} div#primaryNav ul li a:hover {} div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;} Here is the navi: <div id="primaryNav"> <ul> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a class="selected" href="Item">Item</a></li> </ul> </div> PROB FIXED hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED |
|||||||