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

misofrappacino · #1 Dec 19, 2011, 01:33 PM

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 · #2 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 · #3 Dec 19, 2011, 02:22 PM

check your CSS Inserts for syntax errors

misofrappacino · #4 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 · #5 Dec 19, 2011, 03:21 PM

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

misofrappacino · #6 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 · #7 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 · #8 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 · #9 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 · #10 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 · #11 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 · #12 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 · #13 Dec 19, 2011, 07:13 PM

Ok, thanks.

Where am I supposed to put them?

Thank you!

misofrappacino · #14 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 · #15 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 · #16 Dec 19, 2011, 08:37 PM

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

misofrappacino · #17 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 · #18 Dec 20, 2011, 04:14 PM

look at the CSS for the searchbox

misofrappacino · #19 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 · #20 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 · #21 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!!!