Header position trouble in safari and chrome

hannahmary88 · 08-08-2012, 03:14 PM

Hi there,
I am building a website using Cargo Collective template and am having trouble with the positioning of the header in safari and chrome - all is fine in firefox.
The website is:
http://www.cargocollective.com/hannahmarywhite

I want the header image to line up with the left side of project thumbs below - this is perfect in firefox but in sarafi and chrome it is pushed to the right a little - is there a piece of code i can put in the custom html that will give it different alignment in safari and chrome? this is the code i have in there:

Code:

<div style="position: relative; top: 10px; left: 227px;">
<img src="http://www.hannahmarywhite.co.uk/images/header_with_shadow_clean.png" width="550" height="105" alt="Hannah WHite" usemap="#hannahheader" />
</div>

<map name="hannahheader">
  <area shape="rect" coords="0,0,300,105" href="http://cargocollective.com/hannahmarywhite" alt="Home" />
  <area shape="rect" coords="345,80,550,20" href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" />
</map>

i have posted this of course on the cargo collective support forum but have not received a response so thought i'd try here too - really want to launch my site but this is holding me up!

Many thanks in advance if you answer!
Hannah

tracknut · 08-08-2012, 03:50 PM

The problem is that your main content (#content-container) is positioned such that it is centered on the page, whereas your header is positioned in a fixed point 10 pixels down and 227 pixels to the left of the browser window. You must be viewing it on different size browser windows on Firefox and Chrome. Try making your window different sizes and you'll see the issue. I would bring your header image inside #content-container, and let it position naturally with the box model positioning, or at least relative to that #content-container as you've done with your About image.

Dave

hannahmary88 · 08-08-2012, 04:14 PM

Hi Dave, thanks so much for quick response!

I have tried that but the header just disappears? I think perhaps this is because there is an upload field for the header in the user admin for cargo templates and this adds the header into the css - but because I want a map for my image (so different parts click through to different places) i had to add html code for the header in the custom html instead of using the uploader in admin, does that make sense?? sorry if i'm not explaining very well, i'm new to this!

so this is what i have now done in the CSS:

{CODE}
#content_container {
clear: both;
margin: 0 auto 0 auto;
padding: 35px 0 0 35px;
position: relative;
width: 940px;
z-index: 10;

<div style="position: relative; top: 10px; left: 227px;">
<img src="http://www.hannahmarywhite.co.uk/images/header_with_shadow_clean.png" width="550" height="105" alt="Hannah WHite" usemap="#hannahheader" />
</div>

<map name="hannahheader">
<area shape="rect" coords="0,0,300,105" href="http://cargocollective.com/hannahmarywhite" alt="Home" />
<area shape="rect" coords="345,80,550,20" href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" />
</map>

}
{/CODE}

but as i said the header now does not show up as I think it is still controlled by the upload option in the admin for the cargo template.

this might be overkill but here is the entire css code in case there is something in here i can de-activate so the header uploader can be overuled or something??

{CODE}
/*
* Global Counterform by night styles
*/

body, html {
margin: 0px;
padding: 0px;
}

body {
background: #34353a;
color: #777777;
font-family: Arial;
font-size: 12px;
line-height: 1.5;
}

/*
* Header / Navigation
*/

.header_img {
margin: 0 auto 0 auto;
padding: 0 0 0 0px;
position: relative;
width: 940px;
z-index: 11;
}

/* Vertical nav is not supported, however if you'd like to configure this do so here */
.nav_container {

}

#nav_loadspin {
display: none;
position: fixed;
top: 8px; left: 35px;
z-index: 100;
}

.project_link,
.page_link,
.link_link,
.nav_active {
margin: 0 9px 0 -9px;
}

.project_link a,
.page_link a,
.link_link a,
.nav_active a {
font-size: 11px;
padding: 4px 9px 5px 9px;
text-decoration: none;
white-space: nowrap;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.project_link a {
color: #555555;
}

.project_link a:hover {
background: #222222;
color: #f1d93b;
}

.project_link a:active {
background: #333333;
color: #f1d93b;
}

.page_link a {
color: #999999;
}

.page_link a:hover {
background: #222222;
color: #ffffff;
}

.page_link a:active {
background: #333333;
color: #ffffff;
}

.link_link a {
color: #999999;
text-decoration: underline;
}

.link_link a:hover {
background: #222222;
color: #ffffff;
}

.link_link a:active {
background: #333333;
color: #ffffff;
}

.nav_active a {
background: #333333;
color: #999999;
}

.nav_active a:hover {
background: #333333;
color: #999999;
}

.nav_active a:active {
background: #333333;
color: #999999;
}

.pagination {
color: #555555;
font-size: 11px;
margin: 0 18px 0 0;
z-index:11;
}

.bottompad .pagination {
margin-left: 35px;
}

.pagination a {
color: #555555;
text-decoration: underline;
}

.pagination a:hover {
color: #999999;
}

.pagination a:active {
color: #ffffff;
}

.nav_follow {
color: #555555;
font-size: 11px;
z-index: 11;
}

.nav_follow a {
color: #555555;
text-decoration: underline;
}

.nav_follow a:hover {
color: #999999;
}

.nav_follow a:active {
color: #ffffff;
}

.view_tag_info {
color: #999999;
padding-left: 3px;
font-size: 11px;
}

.view_tag_info a {
color: #0066ff;
}

.view_tag_info a:hover {
background: #ffff66;
color: #000000;
}

.view_tag_info a:active {
background: #000000;
color: #ffffff;
}

/*
* Content
*/

#content_container {
clear: both;
margin: 0 auto 0 auto;
padding: 35px 0 0 35px;
position: relative;
width: 940px;
z-index: 10;

<div style="position: relative; top: 10px; left: 227px;">
<img src="http://www.hannahmarywhite.co.uk/images/header_with_shadow_clean.png" width="550" height="105" alt="Hannah WHite" usemap="#hannahheader" />
</div>

<map name="hannahheader">
<area shape="rect" coords="0,0,300,105" href="http://cargocollective.com/hannahmarywhite" alt="Home" />
<area shape="rect" coords="345,80,550,20" href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" />
</map>

}

#maincontainer {
display: none;
margin: 0 0 35px 0;
width: 905px;
}

.bodycopy a {
color: #777777;
text-decoration: underline;
}

.bodycopy a:hover {
color: #999999;
text-decoration: none;
}

.bodycopy a:active {
color: #ffffff;
}

.project_content {
color: #777777;
width: 560px;
}

.project_title {
color: #f1d93b;
font-family: Helvetica neue;
font-size: 24px;
line-height: 1.5;
padding: 0 0 15px 0;
}

/*
* Project content > Header
*/

.project_header {
float: right;
margin: 5px -6px 0 0;
position: relative;
z-index: 99;
}

.project_header div {
float: right;
}

.project_header a {
color: #666666;
font-size: 12px;
font-style: normal;
padding: 4px 9px 5px 9px;
text-decoration: underline;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.project_header a:hover {
background: #333333;
color: #000000;
text-decoration: none;
}

.project_header a:active {
background: #000000;
color: #666666;
}

.project_divider {
color: #555555;
float:right;
}

/*
* Styling of default typographic headers and elements
*/

h1 {
font-size: 22px;
line-height: 165%;
}

h2 {
font-size: 16px;
line-height: 165%;
}

h3 {
font-size: 14px;
line-height: 150%;
}

blockquote {
color: #666666;
margin: 0;
}

.project_content img {
margin: 0px 35px 35px 0px;
}

/*
* Styling of default typographic headers and elements
*/

h1 {
font-size: 22px;
line-height: 165%;
}

h2 {
font-size: 16px;
line-height: 165%;
}

h3 {
font-size: 14px;
line-height: 150%;
}

blockquote {
color: #666666;
margin: 0;
}

.project_content img {
margin: 0px 35px 35px 0px;
}

/*
* Project content > Slideshows
*/

.slideshow_nav {
clear: both;
color: #444444;
padding-bottom: 10px;
font-size: 11px;
}

.slideshow_nav a {
color: #444444;
}

.slideshow_nav a:hover {
color: #999999;
text-decoration: none;
}

.slideshow_nav a:active {
color: #ffffff;
}

.slideshow_count {
font-size: 11px;
}

.slideshow_wrapper {
clear: both;
float: left;
margin: 0px 35px 10px 0px;
}

.slideshow_wrapper a,
.slideshow_wrapper a:hover,
.slideshow_wrapper a:active {
background: none !important;
}

ul.slideshow_thumbs {
float: left;
margin: 0;
padding: 0;
}

.slideshow_thumb {
float: left;
list-style: none;
margin: -3px 0px 0px -3px;
padding: 0px 7px 7px 0px;
}

.slideshow_thumb a {
background: none !important;
border: 1px solid transparent;
display: block;
padding: 2px;
}

.slideshow_thumb a:hover {
background: none !important;
border: 1px solid #444444;
}

a.activeSlide {
background: none;
border: 1px solid #666666;
}

.slideshow_thumb a:active,
a.activeSlide:hover,
a.activeSlide:active {
background: none !important;
border: 1px solid #666666;
}

.slideshow_thumb img {
border: 0;
display: block;
margin: 0;
height: 80px;
}

.slideshow_caption {
clear: both;
display: block;
font-size: 11px;
padding: 5px 0 5px 0;
}

/**
* Fullscreen button
*/

a#fullscreen {
background-color: #1a1a1a;
background-image: url(/_gfx/fullscreen_open.png);
background-repeat: no-repeat;
background-position: 67px 3px;
border: 1px solid #1a1a1a;
color: #bbbbbb;
display: block;
font-family: Arial;
font-size: 11px;
line-height: 18px;
height: 19px;
padding: 0 4px 0 5px;
text-align: left;
text-decoration: none;
width: 74px;
}

a#fullscreen:hover {
background-color: #fff;
color: #000;
}

a#fullscreen:active {
background-color: #fff;
border: 1px solid #999;
color: #666;
}

/*
* Project footer
*/

.project_footer {
color: #444444;
clear: both;
font-size: 11px;
padding: 30px 0px 0px 0px;
}

.comment_link a {

}

.comment_link a:hover {

}

.footer_title_type {
color: #444444;
font-weight: bold;
}

.project_views {
color: #444444;
font-style: italic;
}

/* Project Footer Links */

.project_footer .permalink a {
color: #444444;
}

.project_footer .permalink a:hover {
color: #999999;
text-decoration: underline;
}

.project_footer .permalink a:active {
color: #ffffff;
}

.tags {
color: #444444;
}

.tags a {
color: #666666;
text-decoration: underline;
}

.tags a:hover {
color: #999999;
}

.tags a:active {
color: #ffffff;
}

.tags a:visited {}

.project_footer .editlink a {
color: #0066ff;
font-style: italic;
}

.project_footer .editlink a:hover {
background: #ffff00;
color: #000000;
}

.project_footer .editlink a:active {
background: #000000;
color: #ffffff;
}

.project_bottom {
clear: both;
border-bottom: 1px dotted #333333;
margin: 15px 0px 0px 0px;
}

/*
* Thumbnails
*/

.project_thumb {
float: left;
margin: 0 35px 10px 0;
position: relative;
text-align: center;
}

.project_thumb .hover {
cursor: pointer;
text-decoration: none;
}

.project_thumb .nohover {
text-decoration: none;
}

.project_thumb .hover .cardimgcrop {
border: 5px solid #34353a;
}

.project_thumb .hover .thumb_title span {
text-decoration: underline;
}

.project_thumb.active .cardimgcrop {
border: 5px solid #222222;
}

.project_thumb.active .thumb_title span {
text-decoration: underline;
}

.cardimgcrop {
border: 5px solid transparent;
margin: -5px -5px 6px -5px;
position: relative;
min-width: 200px;
min-height: 134px;
}

.cardimgcrop.notitle_notag {
margin-bottom: 22px;
}

.loader_holder {
display: none;
position: absolute;
text-align: center;
top: 8px; left: 8px;
z-index: 3;
}

.thumb_title {
overflow: hidden;
white-space:nowrap;
text-align: center;
width: 200px;
}

.thumb_title.notag {
margin: 0 0 22px 0;
}

.thumb_title .text {
color: #999999;
font-size: 12px;
font-weight: bold;
line-height: 15px;
overflow: hidden;
padding: 2px 3px 2px 3px;
white-space: nowrap;
text-align: centre;
}

.thumb_tag {
color: #444444;
height: 3em;
line-height: 15px;
margin: 0 0 2px 0;
overflow: hidden;
text-align: center;
width: 200px;
}

.thumb_tag.notitle {
margin-top: 5px;
}

.thumb_tag a {
color: #444444;
font-family: Georgia, times, serif;
font-size: 11px;
line-height: 1.5em;
text-align: center;
text-decoration: none;
}

.thumb_tag a:hover {
text-decoration: underline;
}

/*
* Search results
*/

#search_form {
position: absolute;
top: 10px; right: 44px;
z-index: 999;
}

#search_form #search_term {
font-size: 11px;
width: 120px;
}

#search_form_results {
padding-bottom: 90px;
}

.search_header {
color: #777777;
float: left;
font-size: 14px;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 4px 0;
width: 145px;
}

#search_term {
background: #111111;
border: 1px solid #444444;
color: #777777;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 5px;
width: 220px;
}

#search_results {
float: left;
}

.result {
clear: both;
font-size: 14px;
line-height: 22px;
margin-bottom: 60px;
}

.search_thumb {
float: left;
margin: 4px 25px 35px 0px;
}

.search_thumb img {
width: 120px; height: auto;
}

.search_text {
width: 500px;
margin-left: 145px;
}

.search_title a {
color: #F1D93B;
font-weight: bold;
text-decoration: underline;
}

.search_title a:hover {
color: #ffffff;
text-decoration: none;
}

.search_title a:active {
color: #777777;
text-decoration: none;
}

.search_tags {
color: #444444;
font-family: Georgia, times, serif;
font-size: 11px;
}

.search_tags a {
color: #444444;
text-decoration: none;
}

.search_tags a:hover {
background: none;
color: #777777;
text-decoration: underline;
}

.search_tags a:active {
color: #444444;
}

/*
* Footer
*/

.bottompad {
clear: both;
position: relative;
height: 35px;
margin: 35px 0 0 0;
width: 705px;
}

.bottompad a {
padding: 2px 3px 2px 3px;
}

/*
* Video component
*/

.video_component {
float: left;
margin: 0 15px 15px 0;
}

/*
* Audio component
*/

.audio_component {
color: #777777;
font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif;
font-size: 10px;
height: 30px;
line-height: 26px;
width: 300px;
}

.audio_component div {
height: 26px;
}

.audio_component .border {
border: 2px solid #aaaaaa;
opacity: 0.5;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

.audio_component .vertical_border {
background: #aaaaaa;
opacity: 0.50;

filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

.audio_component .controls {
top: 2px; left: 2px;
}

.audio_component .play_pause {
background: url("/_gfx/playpause.png");
}

.audio_component .spectrum .spectrum_bar {
background: #666666;
}

.audio_component .loading {
background: #bbbbbb;
opacity: 0.25;

filter: alpha(opacity=25);
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
}

.audio_component .progress {
background: #bbbbbb;
border-right: 1px dotted #333333;
opacity: 0.25;

filter: alpha(opacity=25);
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
}

.audio_component .volume_slide.hover {
background: #bbbbbb;
opacity: 0.3;

filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}

/*
* Other
*/

/* Admin and following icons — only seen by members */
.toolset {
position: fixed;
top: 10px; right: 10px;
z-index: 9999;
}

/* "Running on Cargo" */
.cargo_link {
color: #444444;
font-size: 11px;
line-height:165%;
position: fixed;
right: 15px; bottom: 11px;
text-align: right;
z-index:99;
}

.cargo_link a {
color: #666666;
text-decoration: underline;
}

.cargo_link a:hover {
color: #999999;
text-decoration: underline;
}

.cargo_link a:active {
color: #ffffff;
}

/*
* In-browser code editing made "almost bearable" by CodeMirror: http://marijn.haverbeke.nl/codemirror
*/
{/CODE}

MANY THANKS!

tracknut · 08-08-2012, 04:44 PM

I didn't mean to move your html for your header inside the CSS for #content_container, I meant to move the html inside the html div called <div id="#content_container">

Give that a shot and see where you get. You don't need to post the code here, I can see it fine on your web site.

Dave

hannahmary88 · 08-08-2012, 05:04 PM

ah i see sorry!
ok i can see

Code:

<div id="#content_container">

in the html of the page source when i view it by right-clicking but when i go into the cargo admin and click to edit custom html this is the only html code i can see:

Code:

<div class="cargo_link">Running on <a href="http://cargocollective.com">Cargo</a></div>

<script type="text/javascript">
$(document).bind("projectLoadComplete", function(e, pid){
$('.slideshow_component').each(function() {
$('ul.slideshow_thumbs', this ).before( $('.slideshow_caption' , this) );
});
});
</script>

<div style="position: relative; top: 10px; left: 227px;">
<img src="http://www.hannahmarywhite.co.uk/images/header_with_shadow_clean.png" width="550" height="105" alt="Hannah WHite" usemap="#hannahheader" />
</div>

<map name="hannahheader">
  <area shape="rect" coords="0,0,300,105" href="http://cargocollective.com/hannahmarywhite" alt="Home" />
  <area shape="rect" coords="345,80,550,20" href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" />
</map>

any ideas? really really appreciate it!

tracknut · 08-08-2012, 05:49 PM

Quote:

Originally Posted by hannahmary88

ah i see sorry!
ok i can see

Code:

<div id="#content_container">

Actually it should be

Code:

<div id="content_container">

with no "#", right?

Quote:

this is the only html code i can see:

Take this part:

Code:

<div style="position: relative; top: 10px; left: 227px;">
<img src="http://www.hannahmarywhite.co.uk/images/header_with_shadow_clean.png" width="550" height="105" alt="Hannah WHite" usemap="#hannahheader" />
</div>

<map name="hannahheader">
  <area shape="rect" coords="0,0,300,105" href="http://cargocollective.com/hannahmarywhite" alt="Home" />
  <area shape="rect" coords="345,80,550,20" href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" />
</map>

and stick it after the <div id="content_container"> line.

Them change that left: styling from 227px to something like 10px and see if that works.

Dave

hannahmary88 · 08-09-2012, 11:39 AM

Hi again,

Sorry I'm obviously not being clear -
I cannot edit the <div id="content_container"> line as the cargo admin does not give me full html control - i can only see this line when i view the page source, not when i go in to edit the html through the admin - i am unsure therefore how to edit this line of html?

so i cannot do as you suggest and paste my header code after this line.

any more ideas greatly appreciated!
Hannah

tracknut · 08-09-2012, 04:16 PM

Ah, I didn't realize that. Take this:

Code:

<div style="position: relative; top: 10px; left: 227px;">
<ul id="nav">
    <li id="nav-01"><a href="http://cargocollective.com/hannahmarywhite" alt="Home" "="">Hannah White</a></li>
    <li id="nav-02"><a href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" "="">hannah@hannahmarywhite.co.uk</a></li>
</ul></div>

and replace it with this: (changes in red)

Code:

<div style="width:940px;margin:0 auto">
<ul id="nav">
    <li id="nav-01"><a href="http://cargocollective.com/hannahmarywhite" alt="Home" "="">Hannah White</a></li>
    <li id="nav-02"><a href="mailto:hannah@hannahmarywhite.co.uk" alt="Email" "="">hannah@hannahmarywhite.co.uk</a></li>
</ul></div>

Is that possible?

Dave

hannahmary88 · 08-09-2012, 05:47 PM

that worked perfectly thank you! so simple in the end! many thanks for your help