Wordpress Themes - WP Forum at BFA - [SOLVED] How do I fix position of custom header elements

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] How do I fix position of custom header elements - not displaying correctly i (http://forum.bytesforall.com/showthread.php?t=16302)

misofrappacino

Dec 19, 2011 01:33 PM

[SOLVED] How do I fix position of custom header elements - not displaying correctly i

Hello,

I've added some elements above the default header, which are not displaying in the correct positionin Firefox. They display fine in Chrome. I've set up custom CSS in the "CSS Inserts" section, and custom HTML in the "HTML Inserts:Header" section, to create these elements. I'm using Atahualpa 3.7.3 and Wordpress 3.2.1.

Here is a link to my project:
http://www.catherinegeorge.com/cybermill/

Thank you!

misofrappacino

Dec 19, 2011 01:36 PM

Hello,

Here is a link to my project:
http://www.catherinegeorge.com/cybermill

In firefox, the elements at the very top seem to be pushing the rest of the design to the right. In Chrome, the positioning of everything is displaying correctly. How do I fix this problem for Firefox?

Thanks!

juggledad

Dec 19, 2011 02:22 PM

check your CSS Inserts for syntax errors

misofrappacino

Dec 19, 2011 02:53 PM

Thank you, checked and fixed CSS syntax.

Doing so did not fix the positioning problem in the custom header elements.

What else might I try?

Thank you!

juggledad

Dec 19, 2011 03:21 PM

so what did you fix because I still see a syntax error

misofrappacino

Dec 19, 2011 03:30 PM

Thanks for looking.

I checked inside Dreamweaver and fixed br and ampersand tags - those are the errors that came up. Just checked online - sorry, I should have done that first. Correct me if I'm wrong but it looks as though I'm having the problem because I've put in custom HTML which is being put within the "head" section rather into the "body" section of the page code. Is that the problem? How do I get around that?

lmilesw

Dec 19, 2011 03:42 PM

It seems like the searchbox CSS may be part of the issue but this is the kind of thing that takes know how you want everything placed and in this case starting from scratch as there might be CSS that is overlapping with other CSS.

juggledad

Dec 19, 2011 03:44 PM

You have a double }
you put it in the html code in the wrong place (it's abovethe <body>
the position relative is messing it up
and Why are you using dreamweaver?

misofrappacino

Dec 19, 2011 03:50 PM

Hi,

Thanks very much.

I'm not seeing the double }} - can you please point it out?

Yes, that's my question; how do I add custom HTML so that it gets inserted in the correct place? Also, if it's being inserted in the wrong place, then why are the custom elements displaying correctly in Chrome?

I'm using Dreamweaver just to write bits of code so that I can copy and paste them into wordpress.

Thank you!

misofrappacino

Dec 19, 2011 04:30 PM

Thanks again for your help.

Ok, I've put the HTML in the correct place. I've removed the "position relative" from the custom header elements. I've checked and can't find the double }, so can you please tell me where it is?

Thanks very much!

misofrappacino

Dec 19, 2011 05:16 PM

Hello,

I'm still trying to solve the positioning problem at the top of the page, for Firefox:

http://www.catherinegeorge.com/cybermill

Any help would be greatly appreciated, thank you!

juggledad

Dec 19, 2011 06:40 PM

It looks like you put the code in 'HTML Inserts: Body Tag' so now it is part of the <body....> statement. HTML elements don't go there.

misofrappacino

Dec 19, 2011 07:13 PM

Ok, thanks.

Where am I supposed to put them?

Thank you!

misofrappacino

Dec 19, 2011 07:15 PM

Ah, now I see what you mean.

Ok, I put the custom header stuff in the proper place now, I hope.

However, I'm still seeing the same layout problem in Firefox.

Any suggestions?

Thanks!

juggledad

Dec 19, 2011 07:27 PM

Look at the site in FireFox using FireBug and start playing with the CSS. You can shut off CSS on the fly and determine what might be happening
Or
view the source of the page and copy it to a text file and open it in your browser. Now you can play with the code and change theings to find out what is happening. Start by changing the class names (just add an 'x' to the begining ) so the css wont apply, do a save then do a refresh in the browser and see what happens

misofrappacino

Dec 19, 2011 08:37 PM

Ok, thanks very much, I'll try that!

misofrappacino

Dec 20, 2011 03:31 PM

Thanks for the help so far.

Please check again and let me know if you have more feedback, thanks!
http://www.catherinegeorge.com/cybermill

I seem to have fixed many of the layout elements. When I grab the code from "view source" and pasted into Dreamweaver, everything seems fixed now except for the "logoarea" table. I've tried a lot of different things but so far have not been able to fix that.

Any help is greatly appreciated! Thank you!

juggledad

Dec 20, 2011 04:14 PM

look at the CSS for the searchbox

misofrappacino

Dec 20, 2011 07:40 PM

Wow, thank you!!!

As soon as I removed "float:left" from the searchbox div, the layout was fixed in Firefox!!!

Thank you thank you thank you!

However, now the search box is not visible, because it's bumping down and to the left. How do I get it to stay in the top right area, without using a float?

Thanks!

lmilesw

Dec 21, 2011 08:54 AM

You just need to relatively position it. Try addin something like the following to the searchbox css

position: relative;
bottom: 30px;
left: 795px;

misofrappacino

Dec 21, 2011 11:15 AM

WOW!!! Wow wow wow!!!

That worked!!!

Thank you thank you thank you!!!

I am sending you virtual electronic puppies and balloons!!!

Thank you!!!

Thank you to infinity!!!

All times are GMT -6. The time now is 01:59 PM.