|
CSS - Image Inside Content Box Misaligns Borders In Ie
Hi
http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke Similar TutorialsI have a layer with content. The layer is outlined with a 5px border. When the browser window is cropped by the user, the layer with the text will shrink to fit page. Two things about this construction (*see code below) are bothering me. first: the border of 5 pixels is not a part of the layer but seems to exist outside of it. So the page starts with a scroll-bar to compensate for 2*5 is 10 pixel of border height. I want the border to be part of the div, so that the browser will not think of it as overflowing content. secondly: the only way I could find to make the layer shrink as a user crops the browserwindow seems to give it a % height, is there no way the define no height (so height addepts to content) and let the area shrink when needed? two questions, code is below, I can't figure it out, HELP needed, and APPRECIATED hugely. thanks! 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
height:100%; width:100%; padding:0; margin:0;
background-color: #000000; color:white;
}
#myDiv{
width:100%;
height:100%;
}
p.margin{
margin: 0cm;
}
</style>
</head>
<body>
<div class="margin" id="myDiv" style="overflow:auto; width:400px; border:solid 5px green; background-color:blue;">
<p align="left" class="style4">
This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test
</p>
</div>
</body>
</html>
hi, this might be a simple question: i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want). this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6? thanks, tim Hi, Someone I know is trying to find a way of putting a border round an image (say 1px white) followed by another border around that (say 1px blue). Anyone done this or have a good idea of a way to do it? thanks I have a bit of CSS that wraps a border around an image, it works in IE but not in FF. What am I doing wrong? Code:
.book_box {
width: 95%;
padding: 10px 5px 5px 5px;
border: 2px solid white;
background-color: #eef7ff;
text-align : left;
overflow: auto;
}
.book_box_img {
float: left;
margin: 5px;
border: 1px;
border-color: #003366;
}
I want to centre all the small divs that go inside the nav div. Currently the code below centres the text inside each div in the #nav element but it does not centre the actual elements. I have 9 menu items and they should appear in the centre of the nav bar with centred text. Not on the left with centred text. The only work around I can think of is to use an inline style on the first element inside the nav bar and apply padding. This is fine for a fixed width design but we want to use the same nav bar in some fluid designs. Hello, I am using image borders and the CSS I have works on FireFox, Chrome, Opera and Safari, but not IE. Here is my CSS and HTML; Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" >
<head>
<style>
div {
width: 200px;
margin: 0px auto;
border-width: 0px 2px 0px 2px;
-moz-border-image: url(b.PNG) 0 41 repeat;
-webkit-border-image: url(b.PNG) 0 41 repeat;
-o-border-image: url(b.PNG) 0 41 repeat;
border-image: url(b.PNG) 0 41 repeat;
}
</style>
<head>
<body>
<div>Hello this is my test
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
I have tried it on IE6 to 8 and image borders show on none of these. Is there any hack/way how to support image borders also on IE? Hello DevShed, Thanks for advance for the help! It's been a long night for me. Instead of working on my Wordpress blog which is launching tomorrow, I was simply carried away with trying to solve this problem I ran into. I've been now trying to "fix" this for 5 straight hours. At my website http://insfired.com, I simply want to add borders around images which are found in posts. Now, I have some minor CSS experience, so I'm not a total n00b, but I really hope I'm doing something wrong and you can help me. I'm going to paste what I wrote on Wordpress.org to try and get help there (with no avail so far): "Ok so I purchased this "fancy" theme called "Themeology" on Themeforest. I know I should probably email the developer but he doesn't really reply to support requests. Now, NO matter what I tried, or where I tried to add the img {border: 1px....) property, images just won't get wrapped. Nothing. my site is located he http://insfired.com/ I'm seriously willing to pay upfront for any CSS expert to fix this for me. I'm not entering the css property wrong, this is what I want: Code: img {border: 1px solid #c8c8c8;
padding: 2px;
margin-bottom: 10px;
}
Actually, there is an image class that is already bordered but it's also given the float and the margin right property, whenever I edit this one I can see changes to images with this class, but any attempt to apply borders to images (img) or images within posts (.div.entry.single img) were futile. Code: #page ul#entries li img.avatar{
float: left;
border: 1px solid #c8c8c8;
padding: 2px;
margin-right: 15px;
margin-bottom: 10px;
}
The theme has several .css files, and I tried adding the above (1st) code to ALL, not a single thing moved. I tried clearing my cache and the W3 cache. Seriously, if you want money for fixing this for me I'm willing to pay. I'm insfiredmail on gmail. Help?" There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? Is there a fix? img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! Hi. K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath. What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it. Any help is greatly appreciated. This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it. Code:
<html>
<head>
<style>
body {
width: 800px; /* change this value */
margin: 20px auto;
}
#container {
border: 1px solid #f00;
padding: 10px;
}
.floatright {
float: right;
margin: 10px;
background-color: #aaf;
}
</style>
</head>
<body>
<div id="container">
<h3>some latin text</h3>
<p>
<img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</p>
</div>
</body>
</html>
Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly Hey all, I have a position div with a background image that sits just above and to the right of a text box. The image appears higher because I want it to overlap the text box. Most of the area that overlaps the text box is transparent. My problem is the transparent area makes it so you have to click the on the left side of the text box to place the cursor inside. Is their any way to make it so the transparent areas I can click inside the text box while leaving the image appearing over the text box? Thanks 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> Hi guys, I've been struggling with this for some hours now and can't get this to work... I'm no css expert but this is driving me mad... The problem happens in firefox3, in IE7 it displays fine. My code is (copied from firebug): <div id="mydiv" style="margin: 0px; padding: 0px; position: absolute; z-index: 1; opacity: 0.9; left: 763px; top: 143px;"> <div style="border: 1px solid rgb(68, 68, 68); padding: 2px; font-size: 7pt; color: rgb(68, 68, 68); white-space: nowrap; background-color: rgb(255, 255, 255);" id="otherdiv"> Text goes here </div> <div style="position: relative; top: -1px;" id="yetanotherdiv"> <img src="images/bico_w.png" style="margin: 0px; padding: 0px; width: 14px; height: 7px;"/> </div> </div> This is a balloon like tooltip, with a div on top with the text, and a div on the bottom containing the handle image, all wrapped by another nice div. In Firefox, there's space on top and below the image that I can't figure out where it comes from (no space in IE7). If I put a "vertical-align:top" on the image, it sticks to the top div correctly (both IE and firefox), but then I can't get rid of space BELOW the image. Can you help me figure this out? How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? |
|||||||