|
HTML - Colspan Issues
Ok i have this pretty much setup they way I want it but the text
Quote:
Please enter the hours your establishment is open for business. is all bunched up. How do I have that text all show on a single line but keep my boxes and eveything else where it is? Here is a pic so you can see what im talking about... Similar TutorialsPlease help, I have taken my website from fireworks and exported it to Dreamweaver. In my editable html text area I can't change the H1 to a h2 tag with out the entire table changing due to colspan and rowspan automaticly being added by either fireworks or by dreamweaver. If I delete the colspan code the table collapes??? The tutorial I am following allows the instructor to change on his with ease. Firworks cs3 and dream cs3 Thanks you in advance. Yes im a begginner...lol Here is my page. It is ok in IE. I want exactly as in IE. But in Firefox it is displaying the columns differently. In 2nd row the col2 (Actually 2 and 3 colspan) starting from 3rd column where it shud start from 2nd col (As in IE). (I cannt use fixed width). How to fix this. <!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> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" bgcolor="#999999"> cols 12</td> <td width="7%" bgcolor="#CCCCCC">col 3</td> <td width="10%">col 4</td> <td width="8%">col 5</td> <td width="8%">6</td> <td width="6%">7</td> <td width="6%">8</td> <td width="6%">9</td> <td width="6%">10</td> <td width="6%">11</td> <td width="7%">12</td> <td width="6%">13</td> <td width="8%">14</td> </tr> <tr> <td width="4%" bgcolor="#996666">col 1</td> <td colspan="2" bgcolor="#99CCFF">cols 23</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td bgcolor="#996666" width="4%" >col1</td> <td colspan="13" bgcolor="#FFCCCC">cols 234567891011121314</td> </tr> </table> </body> </html> If I specify widths for all cols It is OK. Then If I give a value like 'fdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg' in first row in Col12 2nd row col1 width increasing. It shud be fixed. I hope u understand. Thanks in advance. I'm trying to create a table that looks like this: Code: ============ || || || || || || ======= || || || || || ============ I use this code: Code: <table border='1'> <tr> <td>Text</td> <td rowspan='2'>&nbsp;</td> </tr> <tr> <td colspan='2'>Text</td> </tr> </table> But it comes out looking like this: Code: ============ || || || || || || =======----- || | || || | || ============ with 2 of the lines continuing. I can't seem to get it like the first picture. Any help is appreciated. This might be a very simple problem to fix but I am struggling to find a solution. Basically this is the code for my table: HTML Code: <table cellpadding="0px" border="0px" > <tr><td rowspan="6" width="290px" height="375px"><img width="286px" height="371px" src="test.png"></td> <tr><th>Title</th></tr> <td colspan="2" width="450px">Content 1 <td width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td colspan="2" align="right" width="450px">Content 2 </td></tr> <td colspan="2" width="450px">Content 3 <td colspan="2" width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td align="right" width="450px">Content 4 </td></tr> </table> Basically the problem I have, is I want the 'content 4' box to be the same as the 'content 2' box (Stretched to the full width of the table.). Does anyone know what I'm doing wrong, I'm sure it's really obvious. Any help will be greatly appreciated. Hi, I'm really new to HTML and CSS, but I'm trying to teach myself. Maybe you can help with this problem: I have a table on my homepage that contains 3 columns. I want the first column to have multiple rows (each at 75px high), but I want the 2nd and 3rd column to only have 1 row, and have variable height. I used a colspan tag in the HTML, which seemed to work, in Safari. But I'd like it to look the same in all browsers. In Safari, my first column, top cell, is displayed at the top of the table. And in Firefox and Chrome, that first cell is displayed at the bottom of the table. How can I get the cells to start at the top of the table (each 75 px high) and build from the top-down. For example, This is a screen-shot of what I'd like to have in all browsers: http://toddk.org/table-css-help.png Here is my site: http://toddandjill.com/ CSS: http://toddandjill.com/tkstyles.css These are the CSS properties for my table (also in the CSS file above): HTML Code: .home-table {
margin: 20px auto 0px auto;
border-spacing: 8px 0px;
}
.home-table .row1 {
width: 316px;
height: 0px;
NOborder: 3px dotted;
vertical-align: text-top;
}
.home-table .row2 {
width: 316px;
height: 75px;
border-bottom: 2px dotted #c1c1c1;
vertical-align: text-top;
}
Any help would be greatly appreciated, thanks!! Todd Hope someone can help with this. I think I have a colspan problem, though I'm not entirely sure. Here's what is happening -> websiteproblem.jpg Here's the code for what is happening -> websiteproblemhtml.jpg And would anyone know why I am not able to post text over my background image (images/OHDGwebsitebanner7_06.jpg)?? Would this be easier to do in Macromedia Dreamweaver? Thanks for all of your help! Ok, this is the strangest quirk I think I have seen in IE. It seems that when I combine a right-aligned TD with a UL in the following row in a TD with a colspan of "2", where the content of the right-aligned TD is a word with no spaces, IE goes into spasms. In Opera, Google Chrome, Firefox, and Safari, all is well. Yet in IE, right-padding seems to get automatically added to the right-aligned TD. If I either remove the UL, get rid of the first column in the first row, or break up the long word, it displays fine. Yet, if all those things remain in place, IE just doesn't seem to be able to get its act together. Anyone? Here is my code: HTML Code: <?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<title>Stupid IE</title>
<style type="text/css">
td{
font-family:Garamond;
}
table.Experience{
width:635px;
margin-bottom:14px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
tr.expHeader{
font-weight:bold;
font-size:10pt;
}
td.expDate{
width:130px;
}
td.expCo{
width:205px;
}
td.expLoc{
text-align:right;
width:505px;
}
td.expList{
font-size:11pt;
text-align:justify;
}
td.expList ul{
margin-top:3px;
list-style-type:square;
margin-bottom:6px;
}
td.expList ul li{
margin-bottom:2px;
}
</style>
</head>
<body>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">Averyveryreallylonglongwordthatislonger</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">This time I broke it up a little bit. See what happens?</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
http://www.farewell-travel.com/newsl...rch2012_2.html Why does this look like crap in Internet Explorer? (Specifically talking about the "Highlights" box) It looks fine in firefox but not on IE. I've tried everything to fix it, I don't know what to do! The width dimensions for some reason are way off. It bloats up to 272px when it should be 200px! Please help! Thanks -Please note this is an e-mail newsletter, that is the reason I'm using tables! I have a page I created in dream weaver. It displays fine in IE7, but in IE6 it does not. Here is a link to the page: Problem Page If anyone has any ideas, I'd really appreciate it. Hello! I'm having quite a problem implementing multiple backgrounds into my website. Simply put I want to have a top bar, that will function as header, and a bottom bar, that will function as a footer. I've tried the following solution but it just doesn't seem to work. The div id "bgBottomDiv" just won't show. I was hoping someone could help me out. HTML: HTML Code: <body> <div id="wrapper"> <div id="bgBottomDiv"> "Content goes here " </div> </div> CSS: Code: #wrapper{
position:relative;
margin:0 auto;
width:1100px;
}
body {
background-image:url(/images/Styler_top.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
#bgBottomDiv{
background-image: url(images/Styler_top.png);
background-repeat: repeat-x;
background-position: bottom;
}
Thanks in advance! Alright, so I have this site on which I need a certain part of the site (the content part where the main text bit is) to extend down to the bottom (and preferably no longer), so that if the window is smaller or bigger the text will still just go all the way down to the bottom of the page, and when the text is further down that div will have a scrollbar so you can scroll through the text. The main issue is making it so the end of the div is always on the bottom of the page. (I've tried height=100% on that div but then it just goes below the bottom for some reason.) This is the site. And here's the code: Code: CSS:
div.main { position: absolute;
top: 181px;
left: 110px;
width: 510px;
height: 1500px;
background: url("images/Content Box Bit.png"); }
div.news { position: absolute;
top: 25px;
left: 15px;
width: 494px;
height: 372px;
overflow-x: hidden;
overflow-y: auto; }
Code: HTML:
<div class="main">
<img src="images/News and Updates.png"><div class="news">
<span class="f4"><?php include('sitemapbase.php'); ?></span></div>
</div>
The reason the height of main=1500px is that that's not gonna be scrollable anyway, and I just added a random value to assure that went to the bottom no matter what. Thanks for any help. Wasn't really sure where to put this, sorry if it's the wrong place.. EDIT: Just encountered an additional issue, being that the navigation menus (to the left) look off in IE. The background seems not to start where the div starts. Suggestions? Right then... Problem is, uploaded website, thought that it was ok, checked in Firefox, Safari and even icab... did not check IE (rookie) and did IE have problems? Of course. Basically Some of pics are not showing up - mainly in the shop and one or two on the main pages. I cannot work out how to fix, def not broken links, really boring I know, but can anyone help? Link to site: http://www.thefrenchpantry.co.uk much appreciated... I'm experiencing an issue when using DIVs in DIVs.. I have a container-DIV and a content-DIV, and I would like the container-DIV to stretch vertically as necessary based on how much content is in the content-DIV. Code: <html>
<header>
<style type="text/css">
#divContainer{
position:absolute;
top:10px;
left:10px;
height:100%;
width:200px;
background-color:#CCC;
}
#divContent{
position:absolute;
top:10px;
left:10px
width:180px;
background:color:#BBB;
}
</style>
</header>
<body>
<div id="divContainer">
<div id="divContent">
<!-- Fill me with content -->
</div>
</div>
</body>
</html>
This is basically the code I'm using... whenever the content amount pushes the divContent lower than the bottom of the divContainer, it just overflows out and down the page. What am I doing wrong? Edit: OOPS I set height to 100px on the divContainer, it was supposed to be 100% Arg... IE is bugging me as usual.... Now I've been working on the fantasy football site the past few days getting ready for the fantasy season... but when I look at the site on IE we have a few issues going on... here they a 1. text rendering on the image switcher... why does the text look bold? The info there is using the default font-size of 13px which I set... I'm assuming that probably has something to do with it. 2. The poll part 1 Why on earth is the question indented 6px? The links in the "newest articles" section are set to indent 6px... but I set that on the list... the question of the poll isn't even in a list and it somehow got indented... 3. More crappy text rendering on the poll answers... now I'm seeing the results because I voted and the text looks absolutely horrendous... no idea why either. Any help with these IE crazy things would be greatly appreciated... thanks! Firefox looks fine. Internet Explorer looks rather dumb. 1. Alignment is off 2. One of the links doesn't work 3. Within the site, the main content box adjusts itself according to text (please click reddish image to see) Does anyone know how I can fix this? (I'm sure many people have had this problem. I suppose I could use image map on the main page- that would solve #1 & 2. But I'm at a loss about #3.) Thank you very, very much! http://www.geocities.com/rk.grant/ Hi guys. I'm developing a website, as you do, but I've got two glitches with IE7, that Firefox doesn't have (though that always seems the case). This is to do with the OBJECT tag - using this code: <OBJECT data="nextshow.htm" type="text/html" width=185 height="80%"><P>No information available about our next show.</P></OBJECT> I wanted to show the content in the HTM file but have a transparent background, showing what is behind the OBJECT. This works fine in Firefox, however with IE7 it assumes a white background on the object by default, not a transparent background. In the meantime I have used a conditional comment on the nextshow.htm page to use a relatively suitable colour for the background if IE7 is being used, but it would be nice to keep it transparent - any suggestions? The other issue is in using saurdo gallery (an AJAX photo show / gallery applet). If you visit this page in IE7, then select a photo, the screen darkens and loads the photo in full-size, however the OBJECT is still above everything else, covering up a part of the photo as well as the CLOSE button in the box. In Firefox, this isn't an issue, with the object displaying underneath the box and darkened screen. The aforementioned link will also exemplify the first issue I am having. If you can help me out I'd be very appreciative. Thanks! -Rhys Andrews I am designing my first web site with a PSD file. I have sliced it and there are no issues there. Except that around each image that was sliced and is now a hyperlink to another page, there is a border. I do not want this border there. Is there anyway to get rid of it? By the way, I am using XHTML transitional and CSS. If I need to use something else then please let me know. Thanks Hi... Trying to get this site running but had to use somebody else's code for the forms and I cannot seem to get them working... Here's the link... http://artinludlow.com/joe/index.html Do not go to the main "com/index.html" page, use the "joe/index.html" directory. thanks Hello all. This is my first post with you guys and i hope that someone can help me. i have created a website at www.beresfordmandley.co.uk and i am having a problem with only one page that scrolls down when using IE7. This does not happen with Safari or Firefox. On the race calendar page there is unexpected movement on the left menu buttons and on the right tables and it does not look right. is there a snippet of code that would stop this happening. (I can post the HTML code. Just ask) Many thanks Marcus I'm having some problems with IE (who doesn't?), especially the older versions (or running IE8 in compatibility mode). http://www.wagnermeters.com/slider/carousel3.html I'd appreciate it if you could take a look at it and see what I need to change or add. In firefox, it works great. Here's what it's supposed to do: There's a main image with a bunch of meters on it. If you click on a meter, an enlarged image pops up, and a menu slides out to the right. In old IE, the when you click on the leftmost meter, the image doesn't show. Also, all the menus for the meters have something like 5 or 6 pixels of spacing in between each image in the menu. How do I fix those things? Update: I've fixed the spacing after each image by adding a break after them, but that first popup still is missing the image. |
|||||||