strange div positioning 1

[ggriffit]

I'm reworking one of my old sites (

http://www.greggriffiths.org/livelink/index.html)

All of the DIVs appear where I expect apart from the subFooter div, any ideas why it does not appear under the footer bar ?

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

 

[ChrisHirst]

And the "subFooter" would be .... Which one exactly, bearing in mind that we don't actually know what your intended layout is supposed to look like, and we can only see what it currently looks like.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ggriffit]

Apologies Chris, the subfooter should appear under the footerbar and the associated CSS seems to work, but when I add a border to the subFooter class it shows the div as being just off the top of the page not at the bottom.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

 

[ChrisHirst]

You miss my point, what is the content or identifying features of the "subfooter" div as it stands right now?

Currently it sounds like you are using absolute positioning incorrectly or have not cleared a float plane but I don't want to get bogged down in somebody else's source code until I have verified what I am actually looking for.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

The page you link to does not have a subfooter div anywhere at all in the html code or css. Either as a class or ID

So not sure what it is you are describing here. We don't know what you are calling a subfooter.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ggriffit]

The content of the DIV (the icons under the footer bar) all appear where I need them to, but when I set the border on for the subFooter DIV using

border:2px red solid

it appears near the top of the page rather than where I expect it to be, i.e. under the footer navigation bar.

its this DIV :

<div id="subFooter">
			<span id="subFooterLeft">
				<a href="[URL unfurl="true"]http://www.adservio-consulting.co.uk/"[/URL] title="Website Designed by Adservio Consulting">
					<img src="[URL unfurl="true"]http://www.adservio-consulting.co.uk/images/adservio_01.gif"[/URL] alt="Website Designed by Adservio Consulting" width="40%">
				</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="[URL unfurl="true"]http://www.addthis.com/bookmark.php?v=250"[/URL] onmouseover="return addthis_open(this, ', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
					<img src="[URL unfurl="true"]http://s7.addthis.com/static/btn/lg-share-en.gif"[/URL] width="125" height="16" alt="Bookmark and Share" style="border:0;align:right;">
				</a>
			</span>
			<span id="subFooterRight" class="opaqueImg">
				<a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"[/URL] title="Valid HTML 4.01 Strict">
					<img src="[URL unfurl="true"]http://www.w3.org/Icons/valid-html401"[/URL] alt="Valid HTML 4.01 Strict" height="31" width="88">
				</a>
				&nbsp;&nbsp;
				<a href="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/"[/URL] title="Valid CSS!">
					  <img style="border:0;width:88px;height:31px" src="[URL unfurl="true"]http://jigsaw.w3.org/css-validator/images/vcss"[/URL] alt="Valid CSS!">
				</a>
				&nbsp;&nbsp;
				<a href="[URL unfurl="true"]http://www.w3.org/WAI/WCAG1A-Conformance"[/URL] title="Explanation of Level A Conformance">
					<img height="32" width="88" src="[URL unfurl="true"]http://www.w3.org/WAI/wcag1A"[/URL] alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
				</a>
			</span>
		</div>

that appears in the linked page, with the following CSS :

#footerHomeLink{float:left;width:30%;display:block;margin-left:0.5%;}
.footerLastMod{text-align:right;float:right;color:#000;font-size:70%;width:25%;padding-top:0.3%;}
.footer{width:100%;background-color:#ADDAE6;float:left;clear:left;padding:0%;border-bottom:solid teal 2px;border-top:solid teal 2px;}
#subFooter{text-align:center;margin-top:3em;}
#subFooter img{vertical-align:middle;}
#subFooterLeft{width:25%;margin-right:1%;float:left;margin-bottom:0%;}
#subFooterRight{width:30%;float:right;margin-bottom:0%;}

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

 

[ChrisHirst]

it appears near the top of the page rather than where I expect it to be, i.e. under the footer navigation bar.

Okay, the only element on the 'page' with a red border around that I see is located on the left edge below the 'blog roll' and has a 'title' of "Feature" and contains an 'advert' for "ECM2010".

Is this the element you have dubbed 'sub-footer'?


If not, please, please, tell us what is in the 'sub-footer' element that can be used to identify then visible element on the rendered page?



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHirst]

Oh by the way, I get an error of xmlDoc.load is not a function in Opera (Linux Mint 17.2 OS)

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[c0deM0nK424]

I just used Mozila Firefox 'Inspector' tool to see what the issue was Matt. The issue is with the footer to begin with. It has no declaration or styling, which informs the browser that its a 'block level' element of any sort.

This is why I ommitted the 'float:left and clear:left' rules and applied 'display:inline-block' for footer.

Having done the above, it goes into the position you want, but we still have problems.

The subfooter items ( the graphic images ) overlap the border somewhat. I had to apply 'padding' to them to bring them lower and stop them overlapping, HOWEVER instead, I just applied 'margin-top:1em' to subFooter left, and margin-top:3em to the subFooter right.


Here are step-by-step screenshots which make what I've just said above, more clearer for you. Oh and with explanations of how to make it work, and showing you what css rules I edited/deleted to achieve what you were seeking:

1.

http://www.imagebam.com/image/79cfa8491986309

2.

http://www.imagebam.com/image/24c069491986310

3.

http://www.imagebam.com/image/1b1b18491986311

4.

http://www.imagebam.com/image/196d4e491986315

5.

http://www.imagebam.com/image/2432ed491986317

6.

http://www.imagebam.com/image/d5cc25491986320

( what you're gunning for I'm guessing..)

 

[ggriffit]

thanks with a little tweaking I got it where I needed it on my personal site

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/