CSS positioning

Posted on 2014-09-22
Last Modified: 2014-09-22
Please look at On the menu, right center, click the item at the top, Irrigation. Note the gold colored < left of the first item. Click that & the full menu returns. This is done with a Flash Element.

Now look at Similar menu center, right. Note that when you click on the top item (Irrigation), the gold < appears but on it's own line, pushing the submenu down. This version all done with CSS, Jquery.

How can I position the div containing that "gold" < so it replicates the Flash version?

Source attached.

Question by:Richard Korts
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2

Expert Comment

ID: 40336970

If you add a "float: left;" to the goback element, that should be close to what you want... You might also want to add "margin-top: 3px;" to push it down a little bit so it lines up better with the >

Hope this helps!

LVL 58

Expert Comment

ID: 40337006
No menu on that page, it's on the other page.

Author Comment

by:Richard Korts
ID: 40337221
To webDevEM

Doing what you said produces the attached; worse than before.

Here is the div:

<div id="goback" style="color: #EED028; font-family: Memphis Pro Medium; padding-left: 50px float:left; margin-top: 3px; ">

My guess is a conflict between padding-left & float: left

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

by:Richard Korts
ID: 40337223
To Gary:

I don't understand your comment.

LVL 58

Expert Comment

ID: 40337243
There is no Irrigation menu on the page.
You have an unclosed script tag

      <script type="text/javascript">
$(document).ready(function() {
                        timeOut: 5000
// no closing tag
      <script type="text/javascript">

Author Comment

by:Richard Korts
ID: 40337274
To Gary,

What page are you referring to?

I did a search on this page for "s3slider"; no find. That stuff is elsewhere in this project but I do NOT believe on that page.
LVL 58

Expert Comment

ID: 40337281

The page is working OK in IE but not in FF.

Accepted Solution

WebDevEM earned 500 total points
ID: 40337291
I'm guessing everyone is using different browsers here... In Chrome (for Mac) I made the edits I wrote above and got this:float left and margin top on Chrome
I looked at your site just now in IE, and it seems that you're missing a semicolon after "padding-left: 50px" before the start of the "float: left" which would ignore the float and confuse the padding-left because the browser would treat them both as one command.

Correcting that gave me this on IE 11 (Windows)IE11-Windows so it looks like there will be a more involved answer than just a line or two in order to make this work properly on all browsers.  Depending on what browser you're using, you'll also want to use the developer tools.  (For IE, that would be F12  Looking in there I see 2 errors and 3 warnings, all of which could be confusing the final outcome of the page.  If you find and fix those, you'll have a more consistent end result and be that much closer to being able to adjust the positioning of the  back arrow.

Author Comment

by:Richard Korts
ID: 40337308
Works perfect in Firefox now after that fix on the missing semicolon.

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question