|
HTML - Ie6 Breaking My Tables With Image
Similar TutorialsHello folks, I'm having trouble with the code for a sliced background image, and am hoping someone can help. You can see the design at this url: http://www.magicalwonders.com/graphicslice1/ There are two problems that I'm having difficulty with. 1. I have included a repeating background tile for the right hand sidebar, and although the tile is diplaying O.K. my graphic is breaking at the top of the page when there is text overflow. http://www.magicalwonders.com/graphicslice2/ 2. Second problem. Although I have a repeating tile created for the left hand sidebar, I'm not sure how to include it in the code, as I'm already using a background image referenced by CSS. I need the image for the left side bar to be a background image, as I need to add nav buttons to the page. At the moment, the graphic for the left side bar is just repeating itself, which doesn't look too good as it is a graduated colour. My html is as follows: Code: <table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/headerleft.jpg" width="168" height="126" alt=""></td>
<td>
<img src="images/headermiddle.jpg" width="456" height="126" alt=""></td>
<td>
<img src="images/headerright.jpg" width="166" height="126" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/top_left.jpg" width="147" height="24" alt=""></td>
<td>
<img src="images/top_middle.jpg" width="468" height="24" alt=""></td>
<td>
<img src="images/top_right.jpg" width="175" height="24" alt=""></td>
</tr>
<tr>
<td id="leftsidebar">
</td>
<td valign="top">
Content goes here...
</td>
<td id="rightsidebar">
<img src="images/sidebar_right.jpg" width="175" height="386" alt=""></td>
</tr>
<tr>
<td>
<img src="images/footer_left.jpg" width="147" height="64" alt=""></td>
<td>
<img src="images/footer_middle.jpg" width="468" height="64" alt=""></td>
<td>
<img src="images/footer_right.jpg" width="175" height="64" alt=""></td>
</tr>
</table>
</body>
</html>
And my CSS is: Code: #leftsidebar {
background-color: #fead01;
background-image: url(images/sidebar_left.jpg);
}
#rightsidebar {
background-color: #fead01;
background-image: url(images/sidebar_repeat_right.jpg);
background-repeat: repeat-y;
}
Any help or advice would be much appreciated. Many thanks Myles My goal is to create a website to display a yearbook. First I wanted to display the overall page, with imagemapping to enlarge any images on the page, whether it be a group photo, an indivdual photo...etc. Some pages could have 1 image, others could have 40 images, and not each page has the images in the same spot, so each page would require it's own image mapping. My question is how do I work around screen resolution? I would prefer to use divs and tables for % imaging, but if I do, I can't use an image map. Or is there a way to make an image map that is also based on %? The whole project will encompass about 70 pages of images. Thanks Hi... I have two (hopefully simple) questions: First, is there any way to make a table resize automatically to fit a browser window regardless of the size of the window when the table contains images? I know how to make the table fit the window using <width="85%">, but that only works to a certain point. What I would like to have the image resize itself as the table shrinks. Is this possible? Also, How do I get text to wrap around an image. Like have the image in the upper left corner. Then the text would start at the top of the image directly to it's right and continue on to the bottom of the image. Then it would drop down below the image all the way to the images left edge. I hope I am asking this correctly. Thanks in advance! I am not the most technically inclined, so the wording may be iffy ... but I noticed that when I use a table to align images (like jpegs or gifs), my webpages get skewed only when I view them in Windows internet explorer 8 (things seem to be okay in Mozilla, Safari, Chrome, etc etc) ... anyone know why? here is an example: I put an image with a width="32" and a height="29" into a 'TD' tag (data for table) that is also designated a dimension of 32 by 29 pixels ... for some reason in explorer the images skew the table and distort my webpage. note: I set in the table tag: cellpadding = 0 cellspacing =0 border=0 ALSO i set inside the img src tag a 'border=0' to be safe look at the following example (in explorer 8 then the other browsers that seem to work): http://missko.shacknet.nu/cityofrose...bleexample.htm .. in the first (very small) image to the left you can see a green background color just below the image (only in Windows internet explorer 8) meaning it did not fit within the 'table data' boundaries for that particular table. i hope this makes ANY sense .. this is driving me CRAZY! it is happening with ALL my stuff .. i have a feeling there is no way around this. any ideas? thanks. Hi Everyone I'm new with supporting IE6 so hopefully this is a silly fix. I've attached a screenshot of what IE 6 is doing to a site I'm working on. The page as it should look can be seen at http://mbcustoms.com/forms Basically it is breaking a three column layout I've set up. Everything is shifted over to the right and half my content is cut off. I need to do a redirection without breaking frame...does anyone know the code for this? I am using: <head> <script language="javascript"><!-- location.replace("pagename.html") //--> </script> ...other head section stuff (Title, Description,etc.)... </head> Thanks!!! Hi all I had a web site and I added a new google custom search box in it and in the result page the design is breaking can anyone help me out ... www.karthimx.in this is my website go to this page and search as songs or cricket or something and see de result page header ... I've recently been working on my first site, which is a complete revamp of an old one. It's a 3 column design, with the central area displaying thumbnails. Here it is.. www.sevensofmacclesfield.co.uk I'm getting all sorts of problems when zooming / text enlarging on various browsers ( Ctrl +/-) - particularly the bottom right hand side, where the sidebar joins the footer It's gone live, and I've run out of ideas to sort it out - can anyone offer any advice? Any help will be invaluable! Thermos Any help with this GREATLY appreciated. Having a problem with my sidebar breaking as I add text to the page. See he http://www.thebigfootdemo.com/landingpage Can someone point me in the right direction as to what to look for in the code that might be causing this? I'd like the sidebar (green area) to adjust it's height with the amount of text I put into the page. We need the height of the child div to go 100% of the parent div in other words. If I add too much text, the bar breaks as you will see. Thanks so much in advance, Jeff I am using mysql to import data into a (5 X 10) table. if the rows is more than 10 then i want it to shown on another page. can u pls help me by telling how to implement the such page breaking. Hello html forum and members' site error page --- help !! cant find the < that is breaking my page.... thanks a million.... -tikki- Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> Ok so you can see from my attachment what I want. I want the bottom row to be all-in-one, so I can centre (center..) the text. But not sure how to do this. Code: <tr>
<td>username</td>
<td>password</td>
</tr>
<tr>
<td>forms....</td>
<td>..........</td>
</tr>
<tr>
......how to get it to display all of this one?
</tr>
<td>
Hey guys, Im trying to to add images to the left and right of an area on my site at: www.darkregions.com I attached a picture to this post with red circles of where I want the images to be. The problem is, I havn't done any HTML in a long time and I tried fooling around with the code to try to get the images in those locations but couldn't do it. Could someone please view the source of the main page and tell me what I need to add/change to get images in those two locations? Thanks a bunch to anyone who helps! Code: <table width="400" border="2" class="pay" id="pay">
<col class="itemsDesc" />
<colgroup span="2" class="firstCol" />
<colgroup span="1" class="feeCol" />
<thead>
<tr>
<th>Lessons</th>
<th>Per Term</th>
<th>Per Year</th>
</tr>
</thead>
<tbody>
<td>30 minutes</td>
<td>$600</td>
<td>$1100</td>
</tr>
<tr>
<td>45 minutes</td>
<td>$850</td>
<td>$1600</td>
</tr>
<tr>
<td>60 minutes</td>
<td>$1100</td>
<td>$2100</td>
</tr>
</tbody>
</table>
and my css: Code: * {margin: 0px; padding: 0px}
body {font-size: 14px;
font-family: 'Lucida Grande', Verdana, sans-serif}
table.pay {table-width: 400px; border: 10 px outset rgb(68, 76, 169)}
table.pay thead {background-color: ivory; border: 1px}
table.pay col.firstCol {background-color: rgb(255, 255, 192)}
table.pay col.feeCol {background-color: rgb(232,232,255)}
table.itemsDims {width:12%;}
im supposed to create a heading row group, a body row group, and column groups containing one column element belonging to the firstCol class, and another column element belonging to the feeColumns class which should span two columns in the web table. was just wondering where im going wrong here since when i do my css.. the background colors or no changes seem to be applied to the columns or the headers (thead) I have been working on rebuilding a website using my somewhat dated knowledge of html. It works fine for my daily needs but I got to a page where I needed a table in a table. What I did looks great in Firefox, but when I check it in IE7 it turns into a nightmare. I'm stuck. Can anyone shed any light on where I turned left when I should have turned right (or something of that sort)? I tacked the page onto another site for now. It's at: http://www.cincinnatigolfcourseguide...m-ductwork.php I am trying to slightly reduce the size of the left row on my pages at http://www.mustseedaily.com/. I want to grow the middle table slightly to the left, but I just can't figure out what to change. I have been puzzling over this for some time, and I can usually figure this stuff out, but this one has me baffled. The html is attached. Thanks for any help! Hi, im relatively new to html and I need help with creating tables for making a proffesional site for a practice assignment. Iv'e attached an image of the way I would like the site to look... I also need help with one other thing, when the mouse pointer is moved over the buttons at the top id like them to display a drop down menu of sub categories. Thanks in advance |
|||||||