[英]Can't figure out why the page looks horrible in Firefox? Looks good in Chrome/IE
This is a page I've been working on for quite some time and I can't figure out why the index page looks so bad in Firefox. 这是我已经工作了很长一段时间的页面,我无法弄清楚为什么索引页面在Firefox中看起来如此糟糕。 All the other pages seem to be just fine.
所有其他页面似乎都很好。 I just finished the simulation page and programmed the whole javascript file but I am so bad at HTML.
我刚刚完成了模拟页面并编写了整个javascript文件,但我对HTML非常不满意。 Please note I started with a template (lots of changes since then).
请注意我从模板开始(从那时起进行了大量更改)。 Can anyone guide me in the right direction please?
任何人都可以指导我正确的方向吗?
The page: www.fsaesim.com/index.html . 页面: www.fsaesim.com/index.html 。
Am I missing something in the styles? 我错过了风格吗?
EDIT: Note how bad the front pic looks, the icons for the top menu bar don't appear and it just looks lopsided. 编辑:注意前面的图片看起来有多糟糕,顶部菜单栏的图标不会出现,它只是看起来不平衡。 Open in IE/Chrome and then in Firefox to see the fail.
在IE / Chrome中打开然后在Firefox中打开以查看失败。
The problem is that you've styled your ul#menu with a float:right. 问题是你用浮动样式设置你的ul#菜单:对。 Because of this, in Firefox, the sibling div shares the same behaviour.
因此,在Firefox中,兄弟div具有相同的行为。 Specify an explicit
float:left
to avoid this. 指定显式
float:left
以避免这种情况。
<nav>
<ul id="menu">
...
</ul>
<div align="center" style="overflow: hidden; width: 940px; height: 450px; float: left;">
...
</div>
</nav>
Take the div that is holding your "mainpic.jpg" and move it below your "nav" block. 拿着持有“mainpic.jpg”的div并将其移动到“nav”块下方。 You may need to add a clear:both css style on the div I mentioned before.
你可能需要添加一个清晰的:我之前提到的div上的css样式。
It's a very simple fix actually. 实际上这是一个非常简单的修复。 Adding
<div style="clear:both"></div>
in between your ul nav and the image div cleared the right float you set in the navigation menu and then aligns the image to the center. 在ul nav和image div之间添加
<div style="clear:both"></div>
,清除了在导航菜单中设置的右浮动,然后将图像与中心对齐。 Tested it out in firebug and it works fine. 在萤火虫中测试它,它工作正常。
Try moving the image div to the outside of the nav container like this: 尝试将图像div移动到导航容器的外部,如下所示:
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo">Progress Business Company</a></h1>
<nav>
<ul id="menu">
<li id="nav1" class="active"><a href="index.html">Home<span>Page</span></a></li>
<li id="nav2"><a href="news.html">News<span>Updates</span></a></li>
<li id="nav3"><a href="documentation.html">Available<span>Features</span></a></li>
<li id="nav4"><a href="simulation.html">Run<span>Simulation</span></a></li>
<li id="nav5"><a href="contact.html">Contact<span>Support</span></a></li>
</ul>
</nav>
</div>
<div style="overflow: hidden; width: 940px; height: 450px;" align="center">
<div style="margin-top: 50px; background-color: White; height: 500px;" align="center">
<img src="images/mainpic3.jpg" alt="" />
</div>
</div>
</header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.