12 replies [Last post]
cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

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>

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 35 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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?

cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

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.

Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

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 Smile

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 35 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

Don't worry, I've given up

Smile

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?

AttachmentSize
temp-puzzle.gif 38.22 KB
Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 35 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Well....

You could always try floating the divs.
Sorry about the last post i thought you were trying to cover up the bottom border.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 35 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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;">

cssyummy
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2008-10-17
Posts: 8
Points: 0

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!

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 3 years 35 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.