I'm exploring CafePress, which has some horrible markup.
Across the top of the page is a border which can be almost made to disappear - but not quite.
What's preventing it is the anchor, which appears as a thick black line.
Has anyone any idea how to make this disappear?
I can't influence the HTML output; all I can use is styles, and these styles have to be placed below the default styles.
The commented HTML and internal stylesheet are below.
Sorry about the code needing scroll bars - I've spent 10 minutes already trying to trim it. Probably best to copy and paste into an editor
<html> <!--CAFEPRESS DOESN'T THINK DOCTYPES ARE IMPORTANT SO NEITHER DO I <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> --> <head> <!-- DEFAULT INTERNAL STYLESHEET--> <style type="text/css"><!-- tr,td,caption {font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;color: #333333;} form,input,button,select,option {font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;} .smallprint {font-size:8pt;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;} .checkoutbg {background-color: #ffffff;} .tableheaderbg {background-color: #000000;color: #ffffff;font-weight: bold;} .tablebg {background-color: #F5F5F5;color: #000000;} .tablebg2 {background-color: #E9E9E9;color: #000000;} .sidebarbg {background-color: #ffffff;} .smallsidebartext {font-size:8pt;color: #000000;font-family: Verdana,Geneva,Arial, Helvetica,sans-serif;} .smallselectedsidebartext {font-size:8pt;color: #000000;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;font-weight:bold;} .sidebartext {color: #000000;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;} .head {color: #000000;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;} .alertmessage {color: #ff0000;font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;} img.imageborder,div.imageborder {border-width:0;} --> </style> <!-- STYLESHEET I'VE USED BUT GIVES A BLACK BORDER --> <style type="text/css"> body table:first-child {border:0;margin:0;padding:0; display:none;border-collapse: collapse;} </style> <!-- I ALSO TRIED THIS STYLESHEET BUT JUST GOT A THICK BLACK LINE <style type="text/css"> body table:first-child {border:2px solid white;margin:0;padding:0;display:none;border-collapse: collapse} body tr:first-child {border:0px solid white;margin:0;padding:0;position:display:none;} body td:first-child {border:0px solid white;margin:0;padding:0;position:display:none;} body td:first-child>td {border:0px solid white;margin:0;padding:0;position:display:none;} </style> --> </head> <body> <!-- THIS ANCHOR IS THE PROBLEM - IT GIVES A BLACK BORDER --> <a name="top"></a> <!-- DEFAULT TABLE ACROSS THE TOP OF THE PAGE --> <table width="100%" border="1" cellspacing="0" cellpadding="2" bordercolor="#000000" bgcolor="#FFFFFF"> <tr> <td style="background-color:#FFFFFF;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#FFFFFF;"> <tr> <td style="background-color:#FFFFFF;"> <a href="http://www.cafepress.com/" target="_blank" title="Visit CafePress.com"> <img src="/content/marketplace/img/cs_logo_sm.gif" alt="CafePress.com" width="93" height="20" border="0" align="left" title="CafePress.com"></a> </td> <td style="background-color:#FFFFFF; color:#000000;" class="smallprint" align="right" nowrap> <a href="http://www.cafepress.com/cp/viewcart.aspx?s=mysitecom"> <font color="#000000">Cart & Checkout</font></a> | <a href="http://www.cafepress.com/cp/info/help/custserv.aspx?s=mysitecom"> <font color="#000000">Help</font></a> | <a href="https://www.cafepress.com/cp/info/help/orderstatus.aspx?s=mysitecom"> <font color="#000000"> Order Status</font></a> | <a href="http://www.cafepress.com/mysitecom"> <font color="#000000">Shop Home</font></a></td> </tr> </table> </td> </tr> </table> </body> </html>
Im kinda confused
Ok so your trying to make a banner or top section of your page disapear? Have you got a URL address i can take a look at to get a better picture?
here's the
here's the link:
http://www.cafepress.com/tshirtcoolcom
I've stripped everything down (can't get rid of the cafepress copyright at the end)
View source and look for which appears to be the root of the problem.
It's an intellectual exercise - I can't figure out how to make it not display, though I've read it can be done.

It's the first table in the
It's the first table in the markup, doubt that you can do much about this, especially as there is little sensible tokenisation of the elements, no useful ids or classes.
Frankly this is not the kind of markup many of us care for it's too riddled with errors and tables, only use it if there is no other choice, and why are you trying to hide certain elements? I tend to worry when people ask stuff like that of templates, that are not fully under their control.
Agreed, it's horrible. I'm
Agreed, it's horrible.
I'm not sure that it is the first table as making a copy of the markup and then removing <a name="top"></a> solves the problem.
I just wandered if there was any way of making that anchor disappear. I've tried a few ways, treating it as a link, but that didn't work.
I believe the terms and conditions say we can't remove this table / header, which is why it's become an intellectual exercise.
I had a feeling you weren't
I had a feeling you weren't supposed to remove it, which is why I questioned the reasons.
It's going to be hard to remove without being able to target specifically.
Never mind. I shall use an
Never mind. I shall use absolute divs to cover up the left and right sides of that extending bar so it doesn't appear to stretch across the page, and bury the bottom border of it somehow in graphics 
Just a little more info and i think i can help.....
All i need to know is:
-
*What stylesheet controls what you are trying to change?
*What class is the thing your trying to make disapear?
An a litle more on what exactly your trying to get rid off. Is it the copyright at the bottom of the page?
If so then the code you will need to change on your premium.css is:
.smallprint, .footer { font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:10px; }
to...
.smallprint, .footer { font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:10px; display:none; }
or....
.smallprint, .footer { display:none; }
This will get rid of the whole footer.
By the way I hope you are allowed to do this because i am not condoning it.
Don't worry, I've given up

Don't worry, I've given up on the idea of removing it as it says quite clearly in the FAQs that you can't.
I've attached a diagram of the intellectual puzzle that it's now become.
It was the first, top table htat was causing me problems (if you follow the link above you'll see it in the source code, though I'm now mucking about seeing how other things work so it might not be particularly 'clean' to look at. CafePress churns out some right rubbish)
Getting rid of the table was relatively easy using this:
<style type="text/css"> body table:first-child {display:none;} </style>
But it left a black border, which was related to <a name="top"></a> I can't remove that markup from cafepress, but I can remove it from a local copy of the page, and the border then disappears.
I had a go at making the whole table disappear off the top of the page using absolute positioning, but that didn't work. Now I'm thinking of using the following to shrink the width of the contained text:
<style type="text/css"> body table:first-child {width:400px;position:relative;margin-left:auto;margin-right:auto;} </style>
Unfortunately that still leaves a black border round the top table which is the width of the page, and I don't think it's possible to do anything with that as the border's hard-coded into the table HTML.
It would be nice if I could think of a way of covering up the sides of this black box that stretches the width of the page, but it would have to survive any resolution as the table is defined as 100% width.
So that's the exercise. Is it possible to cover up most of the left and right of a fluid page leaving only a fixed width in the middle?
I toyed with a fixed-width image centred with margin-auto and then raised a few pixels to cover up the border. But how can you then cover up anything to the left of that and to the right?
| Attachment | Size |
|---|---|
| temp-puzzle.gif | 38.22 KB |
Well....
You could always try floating the divs.
Sorry about the last post i thought you were trying to cover up the bottom border.
Also...
You could add to your stylsheets (Preferably the premium.css stylsheet):
tr, td {border: none;}
Obviously this would cause all table data borders would be removed but you can get around this by adding this into your html:
<td style="border: thin #000000;">
Josh, Excellent. It was
Josh,
Excellent. It was actually table, tr, td {border:none;} that finally did the trick as you can now see http://www.cafepress.com/tshirtcoolcom
What about floating the divs? How will that help? Given that I want a fixed width in the centre, how can I float the divs accurately in a fluid layout?
Thanks for getting rid of those borders! It's starting to look a bit cleaner!
Well.....
I will try and attach an example or put it on a subdomain.
Basicly it tells the div that its needs to "float" to the right/left meaning that it doesn't make a new line. So you could have two images on the left and right and also have text in between all on one line.
If you need anymore help just reply or if you must email me, but try to keep it all on this topic so as others can learn at the same time as this is a public forum.