|
HTML - Problem With Image And Text Wrapping In Ie7
Hi all,
I tried posting this under the CSS forum, but didn't get any answers, so I'm hoping for better success here. I don't know if this is a common issue or not, but it's giving me fits. I am trying to make an in-house employee directory for my company. It is a simple design, with the individual's picture displayed on the left of the page and their name and contact information flowing around it to the right of the image. When I use "float: left" in the style sheet, or even align="left" as an attribute in the img tag, it works beautifully in FF. But IE7 seems to want to make the image the same height as the first line of text, and only shows that much of it. If I use no formatting instructions, FF still displays it properly, but IE7 now displays the full image with the bottom aligned with the bottom of the first line of text and the remaining lines of text (each is produced with a br tag) below the image, rather than wrapped along the side. Unfortunately, although I like FF, my company uses IE7, so I need to find a solution. Any help would be greatly appreciated. The problem page can be viewed at: http://skmcbride.com/CHFA/employee_directory.php The style sheet is at: http://www.skmcbride.com/CHFA/_styles/mainstyle.css Thanks for you input, Steve Similar TutorialsI've found some help here already, so thanks in advance to the good folks that help us novices. I have just a couple that need addressing, but they're pretty important to me, so hopefully someone can spell them out. I'll explain them below but here's a quick rundown first: 1.) Wrapping text around a captioned image 3.) A pop-up text bar when a link is moused over. 1.) When I'm posting an image, a caption is almost always necessary. Here's the code I've been using for the image and caption: "<table class="image"> <caption align="bottom">CAPTION</caption> <tr><td><IMAGE LINK></td></tr> </table>" But when I post like that, there's a break between paragraphs to show the image, which disrupts the reading flow. I need a code that will let me post an image, add a bottom-aligned caption, and still have the story text appear alongside the image. NOTE: I've been shown the "align=left/right" code, but where do I insert that in the code listed above?? I've tried right before and right after the image source code, but to no avail. Help, please!! 2.) I'm willing to spend hours to learn this one. Somebody, somebody has to know how to do this one. It's done on this site! OK, here it is. You mouse over a post listing, and a text bar appears next to the cursor. In that bar is the first few lines of the person's post. HOW IS THIS DONE??? For someone looking to find new ways to boost hits on a news site, this is a priceless gem. If anyone knows how to do this or something similar in HTML, PLEASE let me know. Thanks in advance to each and every person who reads this, and a special thanks to those who take the time to help. It means much. aefattwotgm@aol.com in firefox text wraps around the div, but in IE7 it pushes down. i've done everything correctly to the best of my knowledge. is this an IE7 bug or ? www.clipograph.com code: <?php if ($node->node_images) { ?> <!-- Node images --> <div class="node-images" rowspan="2"> <?php print $node->node_images ?><?php ?> </div> <?php }?> <div class="content"><?php print $content ?></div> CSS: .node .content { text-align: left; font-size: 0.85em; line-height: 1.3; min-height: 137px; } .node-images a img { margin-bottom: -3px; } .node-images { float: right; border: 1px solid #000; padding: 5px; margin-left: 10px; margin-top: 10px; } I thought I could remember , but I want to wrap my text using HTML. I forgot how, I am using tables and I want a picture inserted to the right. I have a pix for an example. TIA Is there a way to wrap text in a drop down selection box without increasing the height attribute? Otherwise very long text just cut off. Thanks. p.s. of course the solution should be compliant and especially work in the dreaded IE7. Hi. I've been trying and failing at wrapping text around a mixpod playlist widget. [The widget is in a draft post I'm working on in a blog, not installed as a sidebar gadget.] I'm not technical, and the widget is "flash" technology which befuddles me even further. Fiddling with <div> and "align" codes, I was able to type in text next to the widget, but only in the editor page of Blogger...once I previewed or published it, the text appeared below the widget. I would very much appreciate anyone's ideas. The widget code is: <embed border="0" flashvars="mycolor=5C1400&mycolor2=baac8f&mycolor3=450101&autoplay=false&rand=0& f=4&vol=100&pat=0&grad=false" height="382" name="myflashfetish" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" salign="TL" src="http://assets.mixpod.com/swf/mp3/mff-nano.swf?myid=76126179&path=2011/01/26" style="height: 382px; visibility: visible; width: 165px;" type="application/x-shockwave-flash" width="165" wmode="transparent"></embed> Thank you. Hello what is the HTML code for text wrapping, As whenever I put a html banner link to amazon, it puts it on the next line down And I would like it to appear at the side of text. So what is the html code for text wrapping? Thanks James I'm making a form that contains three places for the user to enter text. The first two are for taking only one line of text, but the third is a bigger input for taking in multiple paragraphs of text. The trouble is, I can't get this third one to wrap the text! Is there a way to turn word wrapping on for an input bar? Or should I be using a different form element? Hi there Anyone know how to force a long piece of link text to wrap on to the next line. Only seems to be a problem in FireFox. Here is the offending page: http://packlife.co.uk/news.asp By the way, the content is generated by the client via content management, otherwise I would stick in a <br />. Thanks, Kev For some strange reason if I want to have an ad or image on the left of my text article usually i put a div code around whatever it is like.. Code: <div style="DISPLAY: block; FLOAT: left; MARGIN: 0px 10px 0px 0px"> </div> This works GREAT in firefox but then i was shocked when i went over to Internet explorer and tested my site there using the latest browser.. it doesnt acknowledge that code and so the ad or the image ends up being above my article instead of nicely on the left and the text wrapped around it on the right like you see in firefox Any ideas how to get around this? Maybe a fix that works for ie. and firefox? thank you guys and gals in advance Hello, I have a drop down menu where one of the items is EXTREMELY long, and because of this, the overall size of the drop down box is the size of this item. I found a way to shrink the size of the drop down box via: <style type="text/css"> select {height: 12px; width: 50px; max-height: 12px} </style> This works in shrinking the overall size, but what happens is that the really long item is now longer than the width of the box and the text for the item doesn't wrap around down to the line below. So you don't actually see the whole item in the list. Do you know how I can wrap this item so that the text falls down to the line below? Cheers Hello =) Well.. I wrote in a text box over my image in a html editor (frontpage) However, when i upload my index file to the web, the text box goes to another place o.O I don't know what to do =x help me please =) thanks How come this code: <img src="tick.gif" alt="+" width="15" height="15" />This is a test, etc. ...puts the image on one line, with the text "This is a test, etc." beneath it? I want the text to be on the same line as the image. (Prob. occurs with IE and FF.) Any ideas? Cheers, James here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works? Thanks Hey there, Iam trying to make a website and i keep stumbling upon the same error. On this website i have a horizontal menu and a submenu which is vertical. Now im working on a 1920 * 1080 monitor and when i make the browser window smaller, the submenu goes under the first collum. I tried several things such as white-space:nowrap; and position:relative. But whatever i try it keeps getting under it. this is the html of the submenu Code: <ul id="submenu" > <li><a href="basketbal.html">Basketbal</a></li> <li><a href="basketbal.html">Basketbal</a></li> <li><a href="basketbal.html">Basketbal</a></li> </ul> and the html of the css submenu: Code: #submenu
{
position:relative;
width: auto;
height:auto;
padding:3px;
margin:0;
float:left;
list-style: none;
display:block;
white-space:nowrap;
}
#submenu a
{
text-decoration:none;
text-align:center;
padding:5px;
margin:5px;
width:75px;
display:block;
color:#666;
}
#submenu a:hover
{
color:#666;
}
This is the link to the website and the css http://porfolioleo.web44.net/test.html http://porfolioleo.web44.net/test/css.css I hope someone can help me with this. Thanks in advance, Leo Hello! I've pasted this piece of html into my mainPage. <body> <div id="featureBox"> <div class="imageTop"><br></div> <ul class="featureBoxes"> <li></li> <li></li> <li></li> </ul> <div class="imageBottom"><br></div> </div> </body> </html> However I can't make the last part <div class="imageBottom"><br></div> render at the bottom of featureBox. Instead it is rendered directly after imageTop. I cannot really figure this one out so any help is greatly appreciated ! Here's the link to my site: http://test.soundfactory.nu/dividum Thanks. Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks! My client friend wants a links page with rollover emails that chage the main image of the page so he can have a different sketch of each of them. My idea, and its backfiring as I can do this if I change the email text into images with swap image and a target but he wants them to remain as copyable (mmm is that even a word?) text. Can it be done with text without making it an image? many thanks to all you wonderful people that make these sites possible jax This is an html problem I believe please don't move this to the scripts forums. Long story short, I'm in the process of a making a file explorer, like windows explorer with cgi scripts in python and html code. My one script shows a list of directories and files one next to the other, like this: The problem is, when there are lots of files and directories, it doesn't move the objects that go past the window to the next line, it just creates a scrollbar. So my question is, how can I make it move the objects to the next line and remove the horizontal scrollbar? |
|||||||