HTML - Alternative To Overflow:auto (sidebar Without Tables)

A little out of my depth here, and my site is based on a DW template. I have a photo section with thumbnails, that is expanding. I have gone from 10 rows to 30, and in the process broken something. I have compared the code from my original 10 rows to the 30 and cannot find anything that would cause the issue, so am hoping for some help.

http://www.uniquefinishing.co.uk/photopages/photos.html

On the top horizontal menu, click on "Videos", then "photos". See the table has dropped? This is the only consistent replication of the issue I can find. If you now keep clicking on the same "photos" link on the top menu, it randomly drops and fixes itself occasionally. This happens randomly from any page to the "photos" page.

Where should I be looking?

Hi Everyone,

I have a div element on a page that has as a child a large node (content is "Ajax'd" into this child). The containing DIV has overflow : auto so that the user can scroll up and down the large content. The function of the containing DIV is simply to provide scrollability and the dimensions of that DIV shouldn't affect the dimensions of it's content. When I use an IFRAME to provide the scrollability, resizing the IFRAME is fine.

The desired effect is to make this look like an IFRAME in effect, it is in effect supposed to look like a desktop app with a multiple document type pane. This is a crap idea I know, but it's outwith our hands. So we can't radically change the way that the produt looks at the moment.

When I use the DIV, then resizing this must cause the browser to recalculate all of the childrens widths which takes ages. Does anyone have any suggestions apart from using an IFRAME for this ? What I want is to be able to resize the containing element without recalculating the widths of all its children. The document div with the scroll bars is held inside a Dojo ContentPane widget with resizable borders hence the noticeable redraw lag when the user changes the size of something.

many thanks,
Woody.

I have a situation where I have to create a site of fixed width and (gulp) fixed height (I know, I know... client insists). So I've got a 'main content' div that is set to Overflow:Auto with css, so it provides a scroller inside the not-very-tall page, allowing me to accommodate a reasonable amount of text without forcing the vertical height to grow.

However, the content div is in the middle of the page and the content inside the div makes use of code fragment anchors (y'know, 'href="#thisHeading"' type links). They work, but the browser puts the jumped-to text at the top of the viewport, NOT at the top of the scrolling div, so the correct bit of text is hidden above the level of the scroller's top edge.

Is there a way around this?
TIA

Hi, I have a problem with my fileserver which might take a long time to fix, it works randomly, so I was wondering if there was a way to supply TWO SRCs in ONE HTML string, both serving as ALTERNATES.

This is what I mean. Will this work? I tried to see if it works, and it does NOT work. How can I make ALT SRC work.

<img src="URL1/johnhall.jpg" alt src="URL2/johnhall.jpg">

Once again, what I mean is...if URL1 fails for some reason, then URL2 loads johnhall.jpg....that means the website reader does not face any interruptions. How to make this work

Thank you in advance for any advice.

Hello guys, ew to this forum and relatively new to the world of infinite coding! I have a small dilemma, in that my funky 'competition' boxes, when put onto my page, mess up all the other styling.

I have come to the conclusion that using <div> tags was a bad idea. I have a main CSS file called master.css controlling most of the syling, however the bulk of the text and content parts are made using div tags.

Being really difficult to explain, I'll post a link:
http://www.area51clan.seemeplayme.net/ben/test2.html

The code for this:
Quote:
<form action="competition.php" method="post" target="_blank">
<div><img src="images/competition.jpg"></div>

<div id="linkinput" style="background-image:url(images/competition2.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Forename" align="center"/>

<img src="images/competition6.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition3.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Surname" align="center"/>

<img src="images/competition7.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition4.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Email" align="center"/>

<img src="images/competition8.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition5.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Answer" align="center"/>

<img src="images/competition10.jpg" align="center"></div><br /><br />
<input type="submit" value="Submit">
</form>

This is what I want, on this page: [note that the lighter coloured parts are fields which do feed into a database and work.]
http://www.area51clan.seemeplayme.net/ben/home.html
The little box on the right side with 'ABC' in it is where I want it. Alt > View source [in IE] will show you the HTML.

I wasnt sure if you needed the CSS, as Im not very good with that and it isnt my code, so here it is:

Quote:
body{
background: url(images/bg2.jpg);
margin: 0px;
padding: 0px;
text-align: center;
}
td{
vertical-align: top;
text-align: left;
}
#div-table{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.table{
width: 1000px;
}
.left-side{
background: url(images/left-ex2.jpg) repeat-y;
width: 110px;
}
.right-side{
background: url(images/right-ex2.jpg) repeat-y;
width: 110px;
}
.top{
background: url(images/ate-fat2.jpg) no-repeat;
width: 779px;
height: 36px;
}
.foot{
background: url(images/foot2.jpg) no-repeat;
width: 779px;
height: 43px;
}
.head{
background: url(images/head.jpg) no-repeat;
width: 779px;
height: 125px;
}
.left-content-t{
background: #FFFFFF;
width: 569px;
}
.right-content-t{
background: #FFFFFF url(images/nav-bg-right2.jpg) repeat-y;
width: 210px;
}
.content-header{
background: url(images/content-head2.jpg) no-repeat;
width: 569px;
height: 47px;
}
.c-head-div{
margin-left: 25px;
margin-top: 22px;
margin-right: 25px;
font-size: 10px;
font-family: Verdana;
}
.c-head-div a:link{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:hover{
text-decoration: underline;
font-weight: bold;
color: #2C4D00;
}
.c-head-div a:visited{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:active{
text-decoration: none;
color: #1C1C19;
}
.content{
background: #1C1C19 url(images/content-bg2.jpg) no-repeat;
width: 568px;
height: 487px;
border-left: 1px solid #3D3D31;
}
.content-div{
margin-left: 22px;
margin-right: 22px;
margin-top: 3px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-top{
background: url(images/nav-topb.jpg) no-repeat;
width: 210px;
height: 34px;
}
.nav-text{
margin-left: 12px;
margin-right: 17px;
margin-top: 10px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-div{
margin-left: 12px;
margin-right: 15px;
margin-top: 9px;
font-size: 10px;
font-family: Verdana;
}
.nav-bg{
background: url(images/nav-bg2.jpg) no-repeat;
height: 89px;
}
/* Nav Linsk */
.home{
width: 81px;
height: 31px;
}
.roster{
width: 82px;
height: 31px;
}
.forums{
width: 87px;
height: 31px;
}
.join{
width: 80px;
height: 31px;
}
.servers{
width: 91px;
height: 31px;
}
.info{
width: 118px;
height: 31px;
}
.dl{
width: 120px;
height: 31px;
}
.irc{
width: 120px;
height: 31px;
}
So, is there an alternative to using div tags, do I put the code in the CSS or is there something else? Sorry to be such a bore guys, but ive been trying this for ages and it just doesnt want to work...Ignore the content too - this is for my ICT coursework.

Thanks again guys, and sorry for the huge post!

TracNav