|
HTML - Serious Layout Issue In Ie
Hi all,
I have recently launched my company website, I am quite a new to web design and have pretty basic knowledge of html and css, I use Mozilla as my browser and upon creating this the layout was perfect for me, however since its launch I have checked it on IE and it is all over the place, I have had help to solve the problem on the main page, which I can use to fix most other pages, however on http://www.pisales.co.uk/products.html#target1 I still cannot fix it so hopefully someone can point me in the right direction, Thank you very much in advance, Similar TutorialsHi there. Can anybody help me fix this issue. At this test url you will see a simple table layout that I have built in Dreamweaver http://www.mediaminx.com/development/ The css can be viewed here http://www.mediaminx.com/development/pages/test.css The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling. Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out? Any ideas out there please? Hi, My website was nearly there, and I paid someone to work on my website and he ended up recoding the layout, and now some things arnt sitting right. I will try to explain this as best as I can. I would really, REALLY appreciate any help people can give me, I was supposed to have this site done last weekend . Here is a link: to the current site: LINK Im trying to do two things to it. I need the yellow box to sit in the horizontal center of the blue box and I need to remove the space above the main gallery image and the top of the yellow box. Here is my css for the box: Code: #content {
margin: 0 0 0 180px;
overflow: auto;
background: #00f;
}
#main-image-container {
width: 690px;
margin: 0 auto;
position: relative;
/*margin:0 auto 0 10%;*/
text-align: center;
background: #fc6;
}
#main-image-container {
position: relative;
float:left;
/*margin:0 auto 0 10%;*/
text-align: center;
margin-left:10%;
/*background: #00f;*/
}
#main-image-container #sliding-frame p {
position: relative;
height: 470px;
overflow: hidden;
}
#main-image {
/*position: absolute;*/
cursor: nw-resize;
z-index: 10;
background-color: #111;
}
Here is the HTML / PHP for the block (most of this is just for generating the thumbnails at the bottom): Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
{/if}
<div style="height:100px;clear:both;"></div>
{assign var="childrenInColumnCount" value=0}
{assign var="subalbumCount" value=0}
<div id="thumbs-container"{if $theme.imageCount < 1 } style="background:none; margin-top:30px"{/if}>
<div id="gsThumbMatrix" align="left">
<ul style="list-style:none;"><li style="float:left;">
<table align="left">
<tr valign="top">
{foreach from=$theme.children item=child}
{if !$child.canContainChildren && $child.entityType != 'GalleryLinkItem'}
{if ($childrenInColumnCount == $theme.params.columns)}
{* Move to a new row *}
</tr></table></li><li style="float:left;"><table align="left"><tr valign="top">
{assign var="childrenInColumnCount" value=0}
{/if}
{assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
{assign var=childSummary value=$child.summary|markup|escape:html}
{assign var=childDescription value=$child.description|markup|escape:html}
<td class="giItemCell">
{if isset($theme.params.itemFrame) && isset($child.thumbnail)}
{g->container type="imageframe.ImageFrame" frame=$theme.params.itemFrame}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image
id="%ID%" item=$child image=$child.thumbnail
class="%CLASS% giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a>
{/g->container}
{elseif isset($child.thumbnail)}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">{g->image
item=$child image=$child.thumbnail
class="r giThumbnail size:=`$child.size`= summary:=`$childSummary`= description:=`$childDescription`="}</a>
{else}
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}"
class="giMissingThumbnail">
{g->text text="no thumbnail"}
</a>
{/if}
</td>
{else}
{assign var=subalbumCount value="`$subalbumCount+1`"}
{/if}
{/foreach}
{* flush the rest of the row with empty cells *}
{section name="flush" start=$childrenInColumnCount loop=$theme.params.columns}
<td width="70"> </td>
{/section}
</tr>
</table></li>
</ul>
</div>
</div>
</div>
{* Loop around for the albums this time *}
{assign var="childrenInColumnCount" value=0}
{if $subalbumCount > 0}
<div id="subalbums-container">
<table id="gsSubAlbumMatrix">
<tr valign="top">
{foreach from=$theme.children item=child}
{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
{if ($childrenInColumnCount == 2)}
{* Move to a new row *}
</tr><tr>
{assign var="childrenInColumnCount" value=0}
{/if}
{assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
<td class="giAlbumCell gcBackground1">
{if isset($child.thumbnail)}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" style="clear:both;">
{g->image item=$child image=$child.thumbnail}<br />
{$child.title|entitytruncate:25}</a>
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"
class="giMissingThumbnail">
<img src="{g->theme url="images/missing.png"}" width="40" height="40"
alt="{g->text text="no thumbnail"}" /><br />
{$child.title|entitytruncate:25}</a>
{/if}
{g->block type="core.ItemInfo" item=$child
showDate=false
showOwner=$theme.params.showAlbumOwner
showSize=false
showViewCount=false
showSummaries=true
class="giInfo"}
</td>
{/if}
{/foreach}
{* flush the rest of the row with empty cells *}
{section name="flush" start=$childrenInColumnCount loop=2}
<td> </td>
{/section}
</tr>
</table>
</div>
{/if}
{/if}
{if !empty($theme.navigator)}
<div class="gbBlock gcBackground2 gbNavigator">
{g->block type="core.Navigator" navigator=$theme.navigator}
</div>
{/if}
{* Store these results in a JavaScript-accessible set of arrays so the slideshow can get at them *}
<script type="text/javascript">
// <![CDATA[
var slideshowImageWidths = new Array({if $theme.imageCount==1}1);
slideshowImageWidths[0] = {$theme.imageWidths};
{else}{$theme.imageWidths});{/if}
var slideshowImages = new Array();
{foreach from=$theme.children key=i item=it}
{if !$it.canContainChildren && $it.entityType != 'GalleryLinkItem'}
slideshowImages.push('{if isset($it.image)}{g->url arg1="view=core.DownloadItem"
arg2="itemId=`$it.image.id`" arg3="serialNumber=`$it.image.serialNumber`"
htmlEntities=false}{else}{g->url params=$theme.pageUrl arg1="itemId=`$it.id`"
htmlEntities=false}{/if}');
{/if}
{/foreach}
// ]]>
</script>
<!--end content--></div>
Im trying to have the top of the blue box line up with the top of the red box, and remove the gap above the main gallery image and the top of the yellow box. Could anyone tell me why this is happening, it wasnt happening before and I have no idea what he changed. I have a Very simple page laid out using <div>'s and at the bottom, IE6 is displaying some of my text (a text link) twice, and wrapping it to the next line? ANY help at all would be a life saver. http://www.jhilgert.com/em/index.html thanks in advance for any help. I just finished writting an HTML email. All looked fine when it was in the browser then I tested it in my email client and all the layout is wrong. my </BR> dont seem to have any affect also im not sure why only some of the   are being shown and not displayed as spaces (??) Heres the code : Code: Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit
MIME-Version: 1.0
<html>
<style type="text/css">
body {
font-family:verdana;
font-size:90%;
line-height:160%;
}
table.mainsection {
background-color:#838B8B;
width:50%;
color:white;
text-align:left;
font-size:99%;
padding:1px;
margin-top:5px;
}
table.subsection {
background-color:#B7C3D0;
color:white;
width:49%;
color:white;
text-align:left;
font-size:88%;
margin-left:14px;
margin-top:5px;
padding:1px;
}
</style>
<body>
<img src="http://graphics.adaptec.com/us/templates/head_logo.gif" />
<p>
<table class=mainsection >
</tr>
<th>Logical device information</th>
<tr>
</table>
Logical device number 0</br>
   Logical device name : RAID1Mirror</br>
   RAID level : 1</br>
   Status of logical device : Optimal</br>
   Size : 476150 MB</br>
   Read-cache mode : Enabled</br>
   Write-cache mode : Enabled (write-back)</br>
   Write-cache setting : Enabled (write-back)</br>
   Partitioned : No</br>
   Protected by Hot-Spare : No</br>
   Bootable : Yes</br>
   Failed stripes : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
   Segment 0 : Present (0,0) </br>
   Segment 1 : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
   Channel #0:</br>
      Transfer Speed : SATA 3.0 Gb/s</br>
      Device #0</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,0</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
      Device #1</br>
         Device is a Hard drive</br>
         State : Online</br>
         Supported : Yes</br>
         Transfer Speed : SATA 3.0 Gb/s</br>
         Reported Channel,Device : 0,1</br>
         Vendor : ST350032</br>
         Model : 0A</br>
         Firmware : SD15</br>
         Size : 476940 MB</br>
         Write Cache : Enabled (write-back)</br>
         FRU : None</br>
         S.M.A.R.T. : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
   Controller Status : Optimal</br>
   Channel description : SATA</br>
   Controller Model : Adaptec 2420SA</br>
   Controller Serial Number : CCEE20</br>
   Physical Slot : 2</br>
   Installed memory : 128 MB</br>
   Copyback : Disabled</br>
   Background consistency check : Disabled</br>
   Automatic Failover : Enabled</br>
   Defunct disk drive count : 0</br>
   Logical devices/Failed/Degraded : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
   BIOS : 5.2-0 (15611)</br>
   Firmware : 5.2-0 (15611)</br>
   Driver : 1.1-5 (2459)</br>
   Boot Flash : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
   Status : Not Installed</br>
</p>
</html>
Thanks, If anyone can help with this problem I would be very grateful. It's a problem I notice on a fairly regular basis so I guess I am over looking something when I am working with tables. Basically my table sizes look completely different in IE than they do in Firefox. Here is an example of a table I'm working on that appears massive in firefox yet is keeping its correct dimensions of height 287 pixels in IE. http://www.orolin.co.uk/prices.html Can anyone shed any light on this problem?. It would be much appriciated. Many Thanks, Jamie Is it possible for me to upload a picture of my template I sketched and you guys tell me what I need to do in order to accomplish this? Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. I have this gif layout http://i21.tinypic.com/140dn5l.jpg But how Do i turn it into a website or like write stuff on it with html? Please help I can do a bit of html this is the way it looks right now: http://christoffer.wicb.ots.dk/byrummet/ but i want it to look like this: also with the rounded cornors but i have tryed lot of things but cant get it to work can u help me?? How would I go about laying this site out similar to this site? I don't want the bubble text in the blue banner, I want to leave that as it is on my site. Thanks for any help! I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up: Is that possible? I've tried various things but no luck yet. Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
Hey guys, I created a webpage with a some pictures and roll over images. The page turned out perfectly well, except when i minimize the browser size. All the images from the right push over to the left depending on the size of the browser. Why does this happen ? Thnx in advance !! Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm Are there in depth tutorials on making a Div layout? Tables are making way more sense. How do you make a div float to the right of something without having it move to the bottom when a page is shrinked? How do you make a div take up space within a div that not taken out? Like in a div. 80%, inside that div is a 100px div, then have another div inside the 80% div that uses the rest of the space? and how do you fix this? http://vertion.fused.ws/div.html Hi, i've recently designed a website using IE as my previewer, so I got it looking good in IE. then I viewd it in Firefox and it lookud disgusting with things out of place everywhere??? the web address is www.echothevoiceofgod.com I fixed most of the problems that Firefox was making but the only thing that I can't fix is that Firefox is cutting the side of the menu????? is there any way I could make it appear correct in both browsers?? thanks for any suggestions Emmanuel |
|||||||