My Header Text - moves into the branding area.

[gayatriom 0]

I used function add_header_text_to_branding() to add header text to this website : http://www.esww-law.com However, in IE and on phones, the header text moves all the way to the left and overlaps the branding logo. this is the code i used // function name function add_header_text_to_branding(){ ?>

1200 One Securities Centre

3490 Piedmont Road

Atlanta, Georgia 30305

404-841-9400 / 866-266-6607

<?php } // end function And then I used div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;} To align it. What am I doing wrong?

[catrina 103]

I think there's a more elegant way of implementing the styling of the header text by using CSS. For example, this styling can be applied using Custom CSS: [code]

[/code] ...and the following styling can be included in it: [code]div.header_text{margin-left:900px; color:white;margin-top:-110px;font-size:16px;text-align:center;margin-bottom:0px;}[/code]

---

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

[gayatriom 0]

ahh. hmm. ok. so you're saying not to put the top css in functions area? what you just put up there looks pretty similar to what I pasted. what am I missing?

[catrina 103]

I pasted what you pasted to show you what can be adjusted. Here is the revised CSS you can add to the Custom CSS section: [code]div.header_text { background: #27378b; /* old browsers */ background: -moz-linear-gradient(top, rgba(39,55,139,1) 47%, rgba(55,90,186,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,rgba(39,55,139,1)), color-stop(100%,rgba(55,90,186,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* opera11.10+ */ background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27378b', endColorstr='#375aba',GradientType=0 ); /* ie6-9 */ background: linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* w3c */ border: 2px solid #5E6A71; padding-top:10px; width:210px; margin-left:900px; color:white; margin-top:-110px; font-size:16px; text-align:center; margin-bottom:0px;}[/code] Please remove all styling in the function. It should look like this now: [code]

1200 One Securities Centre
3490 Piedmont Road
Atlanta, Georgia 30305
404-841-9400 / 866-266-6607

[/code]

[gayatriom 0]

thanks Catrina. Let me try this.

[gayatriom 0]

ok. now the overlapping issue has stopped. The only thing is that instead of being aligned with my content so that the right side of the header is in line with the right side of my content, it's off to the right. (this only happens in IE and on the phone)

[catrina 103]

It could be something to do with the code below or the padding: [code]background: -ms-linear-gradient(top, rgba(39,55,139,1) 47%,rgba(55,90,186,1) 100%); /* ie10+ */[/code] Is the problem occurring on an iPhone?

[gayatriom 0]

It's occuring on my smart phone - android. I'm not too sure about the iphone since I don't have one. :( .

[kastelic 6]

You can always try different hook such as: pagelines_before_branding pagelines_inside_top_branding pagelines_inside_bottom_branding pagelines_after_branding pagelines_before_branding_icons pagelines_branding_icons_start pagelines_branding_icons_end pagelines_after_branding_wrap

[gayatriom 0]

hmm. yes. maybe that will help. will try that out.. so i guess i could tru pagelines_after_branding

[gayatriom 0]

I used pagelines_before_branding_icons instead and it worked perfectly! everything on my smart phone is perfectly aligned! however, i can't check IE right now, so crossing my fingers that it looks perfect in IE also!